WordPress コア同梱の「Masonry」を使ってレスポンシブ対応テーマのサイドバーをかっこよくする。

Posted on Update by admin


WordPressのコアでは「Masonry」というライブラリ が設置されているのをご存知ですか?。これにより Masonry系 のプラグインを入れなくても使えるようになっています。
せっかくなので 今回はテーマで「Masonry」を使ってみたいと思います。

レスポンシブ対応テーマでは、だいたいサイドバーにウィジェットを設置する設計になっています。そんなレスポンシブ対応テーマでは画面の幅が狭くなると段落ちするようになっています。

段落ちしたて の状態では まだサイドバーの幅が広い状態なので ウィジェットが横伸びしてあまりきれいには見えません。

そこで幅が広い状態では CSSで２列になるようにしてみます。しかし、それぞれウィジェットの高さが違うので、まだきれいには見えません。

そんな時、ここで「Masonry」を使うときれいに整列していきますので見栄えがよくなりそうです。

という事で 今回は「Twenty Seventeen」の子テーマを使ってサンプルを紹介します。

　

Twenty Seventeen の子テーマで作成

以下の手順で 子テーマを作成します。

①子テーマのフォルダ作成

wp-content/themesフォルダに 「twentyseventeen-child」というフォルダを新規作成します。

②子テーマのファイル作成

wp-content/themes/twentyseventeen-childフォルダに以下の2つのファイルを新規作成します。
「functions.php」と「style.css」です。
※できればファイルの文字コードは「UTF-8N」にしてください。

③functions.phpの内容

functions.php に以下のコードを入れてください。

<?php
/**
 * Enqueue scripts and styles.
 *
 * @package WordPress4.7
 * @subpackage Twenty Seventeen Child
 * License: GPLv2 or later
 */
function nendebcom_theme_enqueue_styles() {

	// Read parent style. (WordPress4.7～)
	wp_enqueue_style( 'nendebcom-parent-style', get_parent_theme_file_uri( '/style.css' ) );


	// Masonry for Responsive Sidebar
	wp_enqueue_script( 'imagesloaded', includes_url( '/js/imagesloaded.min.js' ), array(), '', true  );
	wp_enqueue_script( 'masonry', includes_url( '/js/masonry.min.js' ), array( 'imagesloaded' ), '', true  );

	if ( function_exists( 'wp_add_inline_script' ) ) {
		$data = "
			( function( $ ) {
				$(window).on('load resize', function(){
					$('#secondary').imagesLoaded( function() {
						$('#secondary').masonry({
							itemSelector: '.widget',	//整列対象
							percentPosition: true,		//グリッド整列を %指定
							isAnimated:true,		//アニメーション
						});
					});
				});
			} )( jQuery );
		";
		// wp_add_inline_script WordPress4.5～
		wp_add_inline_script( "masonry", $data, 'after' ) ;
	}
}
add_action( 'wp_enqueue_scripts', 'nendebcom_theme_enqueue_styles' );

※<?php のところから入れてください。<?php の前にスペースや行などは入れないようにしてくださいね。

④style.cssの内容

style.css に以下のコードを入れてください。

/*
Template:twentyseventeen
Theme Name: Twenty Seventeen Child
Version:1.0.0
License:GNU General Public License v2 or later
*/

/* 画面が 30em(480px)未満 の場合は 元に戻す */
	#secondary .widget {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}

/* 画面が 30em(480px)以上 の場合は ２列にする */
@media screen and (min-width: 30em) {
	#secondary .widget {
		margin-left: 10px;
		margin-right: 10px;
		width: calc(50% - 20px);
	}
}

/* 画面が 48em(768px)以上 の場合は 元に戻す */
@media screen and (min-width: 48em) {

	#secondary .widget {
		margin-left: 0;
		margin-right: 0;
		width: 100%;
	}
}

これで子テーマが出来上がりました。

⑤管理画面 Twenty Seventeen の子テーマを有効化

管理画面の外観→テーマ で「Twenty Seventeen Child」がありますので「有効」にしてください。

⑥動作確認

管理画面で サイドバーにウィジェットを設置して動作確認をしてみてください。
画面が 480px～768px の間だけ サイドバー内のウィジェットが きれいに２列になるようになってますでしょうか?

　

スポンサードリンク



　

解説

style.css

ここでは段落ちした時にサイドバー内のウィジェットが２列になるようにCSSを記述します。

「Twenty Seventeen」では 画面が 48em(768px)未満になるとサイドバーが段落ちするようにCSSのメディアクエリで設定しています。

また「Twenty Seventeen」では 30em(480px)時点でもメディアクエリを設定していますので そのタイミングを使って 30em(480px)～48em(768px) の間だけ２列になるように CSSを追記しています。

さらにウィジェットの幅は伸縮するように calc() で合わせています。

　

functions.php

wp_enqueue_scriptsアクションを使って CSS と Javascriptファイルを読み込むようにしています。

子テーマ用の設定として「 Read parent style.」のところは親テーマ(Twenty Seventeen)のstyle.cssを読み込むようにしています。
※子テーマのstyle.cssは何も設定しなくても読み込みます。

「Masonry for Responsive Sidebar」のところで imagesloaded読込 と Masonry読込 、そして Masonry動作用の scpipt を書いています。
imagesloaded は 画像の読込み状態を管理するライブラリで、これもWordPressのコアに入ってます。
Masonry動作用の scpipt では サイドバー(#secondary)のウィジェット(.widget)を整列対象にしています。

　

スポンサードリンク



　

あとがき

わりとシンプルなコードを書くだけで使えますので子テーマではなくオリジナルテーマでも挑戦してみてください。
Masonryは ③functions.phpの 「// Read parent style」を消して オリジナルテーマの functions.php に 追加したらOKです。
※「#secondary」のところでテーマによって違う場合は変更してください。

CSSはオリジナルテーマの仕様にあわせて追記・変更してください。
※まず、CSSだけで２列(場合によっては３列等)になるようにしてから Masonry をセットした方がやりやすいと思いますよ。
　
　

参考

Masonry
https://masonry.desandro.com/

imagesLoaded
https://imagesloaded.desandro.com/

子テーマ – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

関数リファレンス/wp enqueue style – WordPress Codex 日本語版
https://wpdocs.osdn.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/wp_enqueue_style

関数リファレンス/wp enqueue script – WordPress Codex 日本語版
https://wpdocs.osdn.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/wp_enqueue_script

wp_add_inline_script() | Function | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/wp_add_inline_script/

get_parent_theme_file_uri() | Function | WordPress Developer Resources
https://developer.wordpress.org/reference/functions/get_parent_theme_file_uri/

WordPress4.5から使える wp_add_inline_script を使ってJetpackの「SnowStorm」を桜に変えて降らせてみる
https://nendeb.com/403




スポンサードリンク