simplecoreな毎日

アラフォー既婚男性の日々、子育て、その他雑記

2017.11.15

【WordPress】カスタムフィールドをつかってスライダーを簡単に更新する

WordPress

昨日の記事ではWordPressのカスタムフィールドを利用して、投稿記事に任意の他の記事を紹介する方法を書きました。引き続きカスタムフィールドネタです。それにしても、カスタムフィールドってめちゃめちゃ便利ですね。今まで使って来なかったことを激しく後悔しています。

で、今日はカスタムフィールドをつかって、カルーセルスライダーの更新を簡単にしてみようと思います。完成イメージはこんな感じです。(デモはただのHTMLですが。)もちろんレスポンシブ対応です。

DEMO

まずはカルーセルスライダーの部分を作る

カルーセルスライダーにはslick.jsをつかいます。まあ、特にこれじゃないとダメってこともないので、普段使い慣れているもので構わないと思います。

slick.jsを実装する準備

slick.jsの公式サイトから必要なファイルを落とします。今回つかうファイルは、

  • slick.css
  • slick-theme.css
  • slick.min.js

の3つです。そして、jQueryもつかうので、こちらはCDNから読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

なお、slick.jsのファイルもCDN配信されているようなのですが、それを読み込んでもなぜか上手く動作しませんでした・・・なので、面倒ですがslick.jsの関連ファイルについてはダウンロードしてつかった方が無難かも知れません。

とりあえず、slick.cssとslick-theme.cssは<head>タグ内で、jQueryとslick.min.jsは</body>の直前で読み込みます。

slick.jsをつかったカルーセルスライダーの基本形

まずHTML部分はこうなります。

<ul class="slick-wrap">
	<li><a href="リンク先のURL"><img src="画像のパス"></a></li>
	<li><a href="リンク先のURL"><img src="画像のパス"></a></li>
	<li><a href="リンク先のURL"><img src="画像のパス"></a></li>
	<li><a href="リンク先のURL"><img src="画像のパス"></a></li>
</ul>

次にCSSは最低限下記を記述してください。

.slick-wrap li img {
    max-width: 100%;
    height: auto;
}

slick.jsを動かすためのjavascript

先ほど読み込んだjQueryとslick.min.jsの後に以下を記述します。

<script type="text/javascript">
	$(function() {
		$('.slick-wrap').slick({
			centerMode: true, 
			centerPadding: '60px', 
			autoplay: true, 
			autoplaySpeed: 2000, 
			slidesToShow: 3, 
			arrows: false, 
			responsive: [{
				breakpoint: 768,
				settings: {
					arrows: false, 
					centerMode: true,
					centerPadding: '40px',
					slidesToShow: 3
				}
			},
			{
				breakpoint: 480,
				settings: {
					arrows: false,
					centerMode: true,
					centerPadding: '40px',
					slidesToShow: 1
				}
			}]
		});
	});
</script>

ここでブレークポイントを設定することで、メインで表示されている画像の前後の画像の表示領域をウィンドウ幅に応じて調整することができます。

これらをWordPressに落とし込むときの注意点

カルーセルスライダーをつかうケースとしては、恐らくサイトのトップページに実装することが一番多いと思います。とはいえ、テーマ内のindex.phpに先ほどのHTML部分を記述してしまうと、カスタムフィールドをつかった編集が出来なくなってしまいます。もちろん、page.phpに記述すると全ての固定ページで表示されるようになってしまいます。

なので、まずはpage.phpを複製して、任意の名前のphpファイル(例えばtop.phpなど)を作ります。で、その複製したファイルの一番上に下記を追記して固定ページのテンプレート(ここでは「トップ」という名前)を作ります。

<?php
/*
Template Name: トップ
*/
?>

これで固定ページの投稿画面から「トップ」というテンプレートを選択出来るようになるので、ひとまずこの「トップ」というテンプレートを選択した固定ページを作っておきます。

その後WordPressの設定で、フロントページを「トップ」のテンプレートを当てた固定ページにしておきます。

つまり、先ほどのHTML部分の記述はこの「トップ」というテンプレートを当てた固定ページのphpファイルに記述する、ということになります。ちょっと回りくどかったですね。

カスタムフィールドの設定

後はいつもの通りなのでサクサクといきます。まずはfunctions.phpに以下を記述してカスタムフィールドを作ります。

add_action('admin_menu', 'add_custom_inputbox');
add_action('save_post', 'save_custom_postdata');

function add_custom_inputbox() {
  add_meta_box( 'product_id','トップスライダー', 'custom_area', 'page', 'normal' );
}

function custom_area(){
  global $post;
  echo '画像1枚目:<input type="text" name="img1" value="'.get_post_meta($post->ID,'img1',true).'"><br>';
  echo '画像1枚目のリンク先:<input type="text" name="link1" value="'.get_post_meta($post->ID,'link1',true).'"><br><br>';
  echo '画像2枚目:<input type="text" name="img2" value="'.get_post_meta($post->ID,'img2',true).'"><br>';
  echo '画像2枚目のリンク先:<input type="text" name="link2" value="'.get_post_meta($post->ID,'link2',true).'"><br><br>';
  echo '画像3枚目:<input type="text" name="img3" value="'.get_post_meta($post->ID,'img3',true).'"><br>';
  echo '画像3枚目のリンク先:<input type="text" name="link3" value="'.get_post_meta($post->ID,'link3',true).'"><br><br>';
  echo '画像4枚目:<input type="text" name="img4" value="'.get_post_meta($post->ID,'img4',true).'"><br>';
  echo '画像4枚目のリンク先:<input type="text" name="link4" value="'.get_post_meta($post->ID,'link4',true).'"><br><br>';
}

function doSave($post_id, $data_name){
  $data = '';
  if(isset($_POST[$data_name])){
    $data = $_POST[$data_name]; 
  }else{
    $data = '';
  }
  if( $data != get_post_meta($post_id, $data_name, true)){
    update_post_meta($post_id, $data_name,$data);
  }elseif($data == ""){
    delete_post_meta($post_id, $data_name,get_post_meta($post_id,$data_name,true));
  }
}

function save_custom_postdata($post_id){
  doSave($post_id, 'img1');
  doSave($post_id, 'img2');
  doSave($post_id, 'img3');
  doSave($post_id, 'img4');
  doSave($post_id, 'link1');
  doSave($post_id, 'link2');
  doSave($post_id, 'link3');
  doSave($post_id, 'link4');
}

add_action( 'admin_print_styles', 'my_admin_print_styles' );
function my_admin_print_styles() {
echo '<style>#poststuff #product_id .inside input{ width:80%; }</style>';
}

今回は画像を4枚設定出来るようにしました。枚数を増やしたい場合は、必要部分をコピペしてください。

フロントページになる固定ページのphpファイルには以下を記述します。

<ul class="slick-wrap">
	<li><a href="<?php echo get_post_meta( $post->ID , 'link1' , true ); ?>"><img src="<?php echo get_post_meta( $post->ID , 'img1' , true ); ?>"></a></li>
	<li><a href="<?php echo get_post_meta( $post->ID , 'link2' , true ); ?>"><img src="<?php echo get_post_meta( $post->ID , 'img2' , true ); ?>"></a></li>
	<li><a href="<?php echo get_post_meta( $post->ID , 'link3' , true ); ?>"><img src="<?php echo get_post_meta( $post->ID , 'img3' , true ); ?>"></a></li>
	<li><a href="<?php echo get_post_meta( $post->ID , 'link4' , true ); ?>"><img src="<?php echo get_post_meta( $post->ID , 'img4' , true ); ?>"></a></li>
</ul>

これで、WordPressの投稿画面から簡単にカルーセル部分の更新が出来ます。

例えば、更新担当者にHTMLの知識が全く無い場合でも、更新だけなら比較的簡単にできるようになると思いますし、何より間違って関係無いタグを消されたりとかも無くなるので、制作者側にとっても精神衛生上メリットがあるかと思います。

slick.jsの公式サイトには様々なパターンの例が紹介されているので、今回の方法をうまく応用してみても面白いかも知れません。

無料の画像編集ツールCanvaがなかなか便利

WEB

無料の画像編集ツールCanvaがなかなか便利

CAKEというバンドがかっこいいという話

MUSIC

CAKEというバンドがかっこいいという話

WEBデザイナーの浅いアフィリエイトの話

WEB

WEBデザイナーの浅いアフィリエイトの話

ハッピーガールちゃんついに風邪をひく

LIFE

ハッピーガールちゃんついに風邪をひく

WordPress環境をローカル上に簡単に構築できるLocal by Flywheel

WordPress

WordPress環境をローカル上に簡単に構築できるLocal by Flywheel

【WordPress】シンプルなオリジナルテーマの作り方(6)~アーカイブページ~

WordPress

【WordPress】シンプルなオリジナルテーマの作り方(6)~アーカイブページ~

ハッピーガールちゃんとズーラシアへ行ってきた話

LIFE

ハッピーガールちゃんとズーラシアへ行ってきた話

日野皓正のビンタ事件について思うこと

THOUGHT

日野皓正のビンタ事件について思うこと