カスタム投稿タイプを利用したスライダーコンテンツ

メインビジュアル（ブランディングエリア）等webサイトのトップページにはつきものですよね。これを管理ツールからやってみたいななんて思ったわけです。

管理ツールを使った運用の方がかえって煩わしい時ありますよね。
今回の例であれば画像数枚の更新なのでコードを直書きしてFTPでアップした方が遙かに早いです。

しかし、本サイトのリニューアルコンセプトの一つとしてなるべくCMS化できる所は実現するを掲げているわけでコードを書けない方でもwordpressの管理ツールから更新できるような仕様にしたい。そんな想いから今回のカスタマイズに至ったわけです

仕様について

仕様は「トップスライダー（名前は任意ですが）」なんていうポストタイプを新しくつくりそこにカスタムフィールドで画像を登録、飛ばす先のURLを任意に設定できるというものです。多分これが一番CMSサイトとしては向いてるかなぁと思います。

現行出回っているプラグインだとポストタイプを設定できない、URLは記事のパーマリンクに自動で飛ばしてしまうものがほとんどで僕が考えている仕様とはどうしても沿わない。特に複数のカスタム投稿タイプを運用しているとデフォのpost機能だけでしかまかえないのは不便ですよね。

今回様々なスライダー系のプラグインをみていたのですがどれも非常に優れたものが多いのですがどうしても上記点でひっかかってくるので今回は先に述べたように独自にカスタマイズしてみることにしました。

以下が使用するプラグイン

• “custom-post-type-ui”詳細は省きますがカスタム投稿タイプを簡単に作成できるプラグインです。
• “custom-field-gui-utility”カスタムフィールドのUIを向上させるプラグイン。特にファイルアップローダーが仕様できるのでインストールしておくといいかもです。custom-field-gui-utilityはなくても実行可能です
• “WP Nive Slider”スライダー用のプラグインです。あまり有名ではありませんが画像のエフェクトやらループさせる記事数を任意で設定できる、シンプルなのでカスタマイズしやすい等の理由から選びました。

カスタム投稿タイプの設定

まず、カスタム投稿タイプを設定します。前述の通りここではこのプラグインの説明及び機能は省きます。今回設定したの分類名を
“top_slide”で設定しています。これは適宜変えて下さい。
うまくいくと新しくポストタイプとしてトップスライダー用のポスト機能が追加されます。

カスタムフィールドの変更

仕様で述べたように任意のURLを設定できる項目と画像アップロード用の項目を追加します。custom-field-gui-utilityを使用しています。

僕の場合
/wp-content/plugins/custom-field-gui-utility/conf.ini
を以下のように変更

;トップスライダーで使用
[slide_image]
fieldname = トップスライド用画像の登録です
type = imagefield
class = post page top_slide
sample = トップスライド用画像を登録して下さい。
must = 1

[slide_url]
fieldname = URL
type = textfield
class = post page top_slide
default = http://○○.com（例）
size = 35
sample = トップスライド用画像のリンク先URLを設定してください
must = 1

設定が終わると以下写真のような記事ページになります。

WP Nive Sliderの改修

WP Nive Sliderをカスタム投稿タイプの記事を読み込む為に編集します。
※直に編集しちゃうのでプラグインのアップデート時には注意が必要です。。。

ポストタイプ：　top_slide
編集したファイル：　/wp-content/plugins/wp-nivo-slider/wp-nivo-slider.php

<div id="slider">
<?php
	$category = get_option('wpns_category');
	$n_slices = get_option('wpns_slices');
?>
<?php query_posts( 'cat='.$category.'&posts_per_page=$n_slices' ); if( have_posts() ) : while( have_posts() ) : the_post(); ?>
	<?php if(has_post_thumbnail()) : ?>
	<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
		<?php the_post_thumbnail(); ?>
	</a>
	<?php endif ?>
	<?php endwhile; endif;?>
	<?php wp_reset_query();?>
</div>

↓

<div id="slider">
<?php
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$newloop = new WP_Query(array(
    'post_type' => top_slide,
    'paged' => $paged
));
if ($newloop->have_posts()) :
    while ($newloop->have_posts()) : $newloop->the_post();
?>
	<a href="<?php echo post_custom('slide_url'); ?>"><img src="<?php echo post_custom('slide_image'); ?>" width="1000" height="260" alt="<?php the_title(); ?>" /></a>
	<?php endwhile; endif;?>
	<?php wp_reset_query();?>
</div>

以上で完成です。後はポストの値を色々とれるので自分用にカスタマイズしてもいいかもしれませんね。