Advent Calendar in 信州松本(だけじゃなくてもいいよ)ということで、
昨日のthinkAmiさんの機能のGoogleDriveAPIでHTMLファイルを作成し、GoogleドライブでWebサイト公開してアルクマを追いかける – メモ的な思考的なに引き続き、１９日目を担当させてもらいます。Toro_Unitです。
Google App Engineって楽しそうですね。プログラマさんの記事を読むと夢がほんとに広がります。
そんなわけで、「何か作りたい！」という衝動に駆られたのですが、WordPressのカスタム投稿についてのプラグインを作ってたりするので、せっかくだからWordPressのカスタム投稿タイプでちょっと変わったことをやってみました。
WP Custom Slider:https://github.com/Toro-Unit/wp-custom-slider
デモサイト：https://torounit.com/wpcustomslider/
WordPressのカスタム投稿タイプ&投稿サムネイルとNivo-Sliderでコンテンツスライダーを作ってみました。
カスタム投稿タイプ部分
[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 日本語版
データの取得
これだけだと「一体何に使うんじゃい！」って感じなのですが、このデータを
[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にフィルターフックをちょこちょこ書いてあげれば、大丈夫。
そんなわけで出来上がったのが、こちらのデモサイトです。
Githubにも公開しています。https://github.com/Toro-Unit/wp-custom-slider
カスタム投稿タイプでこんなこともできます！カスタムフィールドも合わせて使うと画像のリンクのURLなどが設定できたり夢が広がります。
APIもかなり整備されているのでプラグイン制作も意外に簡単にできてしまうのでトライしてみてください。
次は・・・
明日は、4_1さんです。
Advent Calendar in 信州松本(だけじゃなくてもいいよ)にお声かけいただきありがとうございました。m(_ _)m
あと一週間、がんばっていきましょう！
