# カスタム投稿タイプとNivo-Sliderで更新しやすいスライドエリアを作る。【Advent Calendar in 信州松本(だけじゃなくてもいいよ)】

- リンク: https://torounit.com/blog/%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%a0%e6%8a%95%e7%a8%bf%e3%82%bf%e3%82%a4%e3%83%97%e3%81%a8nivo-slider%e3%81%a7%e6%9b%b4%e6%96%b0%e3%81%97%e3%82%84%e3%81%99%e3%81%84%e3%82%b9%e3%83%a9%e3%82%a4%e3%83%89/
- 公開日: 2012-12-19T10:00:57+09:00
- 作成者: Toro\_Unit

[Advent Calendar in 信州松本(だけじゃなくてもいいよ)](http://atnd.org/event/ac2012matsumoto)
ということで、
 昨日の[thinkAmi](http://d.hatena.ne.jp/thinkAmi/)さんの[機能のGoogleDriveAPIでHTMLファイルを作成し、GoogleドライブでWebサイト公開してアルクマを追いかける – メモ的な思考的な](http://d.hatena.ne.jp/thinkAmi/20121218/1355779644)
に引き続き、１９日目を担当させてもらいます。Toro_Unitです。

Google App Engineって楽しそうですね。プログラマさんの記事を読むと夢がほんとに広がり
ます。

そんなわけで、「何か作りたい！」という衝動に駆られたのですが、[WordPressのカスタム投稿についてのプラグイン](https://torounit.com/plugins/custom-post-type-permalinks/)
を作ってたりするので、せっかくだからWordPressのカスタム投稿タイプでちょっと変わっ
たことをやってみました。

WP Custom Slider:[https://github.com/Toro-Unit/wp-custom-slider](https://github.com/Toro-Unit/wp-custom-slider)

デモサイト：[https://torounit.com/wpcustomslider/](https://torounit.com/wpcustomslider/)

WordPressのカスタム投稿タイプ&投稿サムネイルと[Nivo-Slider](http://nivo.dev7studios.com/)
でコンテンツスライダーを作ってみました。

# カスタム投稿タイプ部分

[php]
 register_post_type(‘hoge’,array( ‘public’ => false, ‘show_ui’ => true, ‘show_in_menu’
=> true, ‘query_var’ => false, ‘capability_type’ => ‘post’, ‘has_archive’ => false,‘
supports’ => array( ‘title’, ‘editor’, ‘thumbnail’ ) ); [/php]

register_post_typeのpublicをfalseにすることで、URLでアクセスできないカスタム投稿
タイプを作ることができます。
 また、supports値で、使う要素を制御できます。タイトル
や本文入力欄も消すことだってできます。

詳しくはCodexを！: [関数リファレンス/register post type – WordPress Codex 日本語版](http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/register_post_type)

# データの取得

これだけだと「一体何に使うんじゃい！」って感じなのですが、このデータを
 [php] get_posts(‘
post_type=hoge&posts_per_page=-1’); [/php]

みたいな形で取得することができます。
 あとは、foreachに突っ込んでやりたい放題です。

キャプションの部分は本文入力欄を使っています。setup_postdataに取ってきた記事データ
を突っ込むとthe_content等のテンプレートタグが使えるんですが、今回は本文が取れれば
十分だったので、

[php]
 $content = apply_filters(‘the_content’,$post->content); [/php]

みたいなやり方で、本文をもってきています。ここまでで、大体完成。

# 仕上げ

そして、Nivo-Sliderを突っ込むだけなんですが、横幅が親要素の横幅まで拡大されてしまう
ので、置く場所によってはサイズがおかしくなる場合があったりしますので、

[php]
 function fix_slide_size($size) { return array( 960, 400 );//横幅,高さ } add_filter("
wp_custom_slider_size", "fix_slide_size"); [/php]

みたいにフィルターフックを使って大きさをカスタマイズできるようにしています。

[php]
 public function set_image_size() { global $content_width;

 if($content_width) {
 $width = $content_width; }else { $width = 960; } $size = 
apply_filters("wp_custom_slider_size",array( $width, 350 )); add_image_size("slide",
$size[0], $size[1], true); } [/php]

ただ、apply_filtersがadd_filterよりも先に実行されると困るので、’after_setup_theme’
というアクションフックに登録することで、テーマの読み込みが終わった後にプラグイン
が機能するようにしたりします。

# 使い方

いろいろ書きましたが、使い方としては、/wp-content/pluginsにプラグインを解凍・有効
化して、

テーマの中で、表示したい場所に
 [php] <?php wp_custom_slider();?> [/php]

と書くだけです。サイズのカスタマイズや管理画面でのメニューなどの変更は、functions.
phpにフィルターフックをちょこちょこ書いてあげれば、大丈夫。

そんなわけで出来上がったのが、こちらの[デモサイトです。](https://torounit.com/wpcustomslider/)

Githubにも公開しています。[https://github.com/Toro-Unit/wp-custom-slider](https://github.com/Toro-Unit/wp-custom-slider)

カスタム投稿タイプでこんなこともできます！カスタムフィールドも合わせて使うと画像
のリンクのURLなどが設定できたり夢が広がります。

APIもかなり整備されているのでプラグイン制作も意外に簡単にできてしまうのでトライし
てみてください。

# 次は・・・

 明日は、[4_1](http://meusonho41.com/)さんです。
 [Advent Calendar in 信州松本(だけじゃなくてもいいよ)](http://atnd.org/event/ac2012matsumoto)
にお声かけいただきありがとうございました。m(_ _)m あと一週間、がんばっていきましょう！