ども、WPer 界で上位に食い込む位いい声の Webnist です。
ネタが尽きてきた中で頭を絞って出てきた、一滴を今回書いていこうかと思います。
その内容は、最近？流行りのスライドで写真等を表示する事をWordPressで簡単にやってしまおうということです。
今回、準備頂く物は以下になります。
- WordPress (動くまでが WordPress です)
- くじけぬ心
- 向上心
- スライド表示用のカスタム投稿タイプ(Custom Post Type)
- jQuery の Orbit ライブラリー (http://www.zurb.com/playground/orbit-jquery-image-slider)
- 今回使用するテーマはめ組さんの膳テーマを使用しています。
に掲げた5項目です。
1〜3については、飛ばしまーす。
スライド表示用カスタム投稿タイプについて
これについては、検索すると色々なところで解説されているので詳しく書かないですが、
おでさんの『カスタム投稿タイプ(Custom Post Type)の導入と使い方 [WordPress 3.0]』を読めば理解できると思いますよ。
ソースコードで追加していくのは、ちょっと面倒なので僕は楽をして、プラグインを使います。
僕が使っているプラグインは 『GD Custom Posts And Taxonomies Tools』 というですね、理由は特にありませんが… ただ、このプラグイン日本語化されていないのです。。。
僕は英語がわからないので、誰か日本語化してくれないかなっと期待しています。
今回はスライド用なので分かりやすく 『slide』というカスタム投稿タイプを作成します。
GD CPT Tools の設定画面
Name のところでカスタム投稿タイプの名前を入力します。（日本語は避けといたほうが安全です。）
Labels のところでカスタム投稿タイプのラベルを入力します。(日本語でも大丈夫です。)
Auto fill rest をクリックすると他の部分は勝手に記入してくれます。が、日本語化されていないので英語で入ってきます。
Settings のところでカスタム投稿タイプの投稿画面に表示する項目を選択できます。
今回は、スライド表示用なのでデフォルトに Excerpts と Post Thumbnails を追加しています。
とりあえず上記を設定して、Save Custom Post を押して保存します。
カスタム投稿メニュ
保存したら画像のようなメニューが追加されます。
jQuery の Orbit ライブラリーの追加
http://www.zurb.com/playground/orbit-jquery-image-slider ここからファイルをダウンロードしてきます。
使用しているテーマに slide というフォルダを作ってその中に解凍してできた、orbit-1.2.3(記事を書いている時のバージョンは1.2.3です) 内の jquery.orbit-1.2.3.min.js, orbit-1.2.3.css, orbit をコピーします。
コピーしたら、テーマの functions.php を編集します。
以下のソースで js を読み込みます。
add_action( 'wp_print_scripts', 'add_slide_js' );
function add_slide_js() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'orbit-script', get_stylesheet_directory_uri() . '/slide/jquery.orbit-1.2.3.min.js' );
}
以下のソースで CSS を読み込みます。
add_action( 'wp_print_styles', 'add_slide_style' ) ;
function add_slide_style() {
wp_enqueue_style( 'orbit-style', get_stylesheet_directory_uri() . '/slide/orbit-1.2.3.css' );
}
以下でスライド用のスクリプトを有効化します。
add_action( 'wp_head', 'add_slide_script' );
function add_slide_script() { ?>
<script type="text/javascript">// <![CDATA[
jQuery(document).ready(function($){ $('#slide_box').orbit(); });
// ]]></script>
<?php } ?>
$('#slide_box').orbit();
上記で、#slide_box と指定しましたので、orbit-1.2.3.css を編集します。
デフォルトでは、#featured となっている部分を、 #slide_box に変更しましょう。
これで、スライドの下準備は完了です。
次に WordPress 側で、カスタム投稿タイプでスライド表示に進みます。
カスタム投稿タイプでスライド表示
さて、いよいよ大詰めにきました。
ここで、一息入れてお菓子を食べるも、一気に進んでいくのもありです。
WordPress 側で、カスタム投稿タイプを表示する設定をしていきます。
functions.php にまず以下を追加します。
add_image_size( 'slide-thumb', 970, 99999 );
これで、アイキャッチに追加したときの画像の大きさを追加します。
大きさは、テーマによっては違うのでそれに合わせてください。
次に、カスタム投稿タイプを表示するために、以下を追加します。
function slide_post_list() {
global $post, $post_type;
$args = array(
'numberposts' => 5,
'post_type' => 'slide',
);
$get_posts = get_posts( $args );
if ( $get_posts ) {
$output = '
<div id="slide_area">' . "\n";
$output .= '
<div id="slide_box">' . "\n";
foreach( $get_posts as $post ) {
setup_postdata( $post );
$attachment_id = get_post_thumbnail_id();
$attachment_src = wp_get_attachment_image_src( $attachment_id, 'slide-thumb' );
$output .= '<a title="' . get_the_title() . '" href="' . get_permalink() . '" data-caption="#slide_' . $post->ID . '"><img src="' . $attachment_src[0] . '" alt="' . get_the_title() . '" width="' . $attachment_src[1] .'" height="' . $attachment_src[2] .'" /></a>' . "\n";
}
$output .= '</div>
' . "\n";
foreach( $get_posts as $post ) {
setup_postdata( $post );
$excerpt = $post->post_excerpt;
$output .= '<span id="slide_' . $post->ID . '" class="orbit-caption">' . $excerpt . '</span>' . "\n";
}
$output .= '
</div>
' . "\n";
echo $output;
}
}
上記を追加し保存したら、テーマの表示したい部分につかします。
今回は、ヘッダーのメイン画像を置き換えて使用するために header.php に記述します。
<?php slide_post_list(); ?>
画像
以上で、スライド表示用投稿を作ってみるの紹介を終わりにします。
あっそうそう、もちろん IE6 はサポート外ですよ。。。
外部サイトにリンクするという説明はまた別の話で。