WordPressでPinterestスタイルの投稿グリッドを追加するためにMasonryを使用する方法

これは Josh Pollock によるゲスト投稿です

Pinterest風の投稿のグリッド表示は、しばらくの間WordPressブログのインデックスページで人気のあるデザインとなっています。これは、人気のソーシャルメディアサイトの外観を模倣しているだけでなく、画面上のスペースを最大限に活用しているためでもあります。WordPressブログのインデックスでは、各投稿プレビューが自然に必要なサイズになり、余分なスペースを残しません。

このチュートリアルでは、人気のMasonry JavaScriptライブラリを使用して、ブログインデックスやテーマのアーカイブページにカスケードグリッドレイアウトを作成する方法を説明します。モバイル最適化のために考慮する必要があるいくつかの問題と、それらを解決する方法について説明します。

注意：これは高度なチュートリアルであり、WordPressテーマの編集に慣れており、十分なHTML/CSSの知識がある方を対象としています。

ステップ1：テーマに必要なライブラリを追加する

更新: WordPress 3.9 には、Masonry の最新バージョンが組み込まれました。

まず、このコードを使用して Masonry をテーマに読み込む必要があります。

if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
    wp_enqueue_script('masonry');
    wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists

このコードは、Masonryをロードし、テーマのテンプレートファイルで利用できるようにするだけです（WordPressでJavaScriptとスタイルを適切に追加する方法については、WordPressでJavaScriptとスタイルを適切に追加する方法ガイドを参照してください）。また、どちらにもjQueryを依存関係として追加していないことにも注意してください。Masonry 3の利点の1つは、jQueryを必要としないことですが、一緒に使用することもできます。私の経験では、jQueryなしでMasonryを初期化する方が信頼性が高く、jQueryのロードをスキップする可能性が開かれ、ページ読み込み時間と互換性の問題の両方に役立ちます。

ステップ2：JavaScriptの初期化

次の関数はMasonryをセットアップし、それと一緒に使用されるコンテナを定義し、すべてが正しい順序で行われるようにします。Masonryは、グリッドを動的にレイアウトするために、ページ上の各アイテムのサイズを計算する必要があります。多くのブラウザでMasonryに関して私が遭遇した問題は、Masonryが遅延読み込み画像のアイテムの高さを誤って計算し、アイテムが重なることです。解決策は、すべての画像が読み込まれるまでMasonryがレイアウトを計算しないように、imagesLoadedを使用することです。これにより、適切なサイジングが保証されます。

これは、ページフッターに初期化スクリプトを出力する関数とアクションです。

if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#masonry-loop');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            itemSelector: '.masonry-entry'
        });
    });
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists

この関数は、インラインコメントでステップバイステップで説明されています。JavaScript関数は、Masonryに「masonry-loop」というIDを持つコンテナ内の「masonry-entry」というクラスを持つアイテムを探させ、画像が読み込まれた後にのみグリッドを計算するように指示します。querySelectorで外側のコンテナを、itemSelectorで内側のコンテナを設定します。

ステップ2：Masonryループを作成する

Masonry の HTML マークアップを直接テンプレートに追加する代わりに、それ用の別のテンプレートパーツを作成します。 “content-masonry.php” という名前の新しいファイルを作成し、テーマに追加します。これにより、Masonry ループを必要なだけ多くの異なるテンプレートに追加できるようになります。

新しいファイルに、以下のコードを追加します。マークアップは、通常のコンテンツプレビューで表示されるものと同様です。必要に応じて変更できますが、最も外側の要素に、前のステップで itemSelector として設定した “masonry-entry” クラスが付いていることを確認してください。

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <div class="masonry-post-excerpt">
            <?php the_excerpt(); ?>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

このマークアップには各部分にクラスが付いているため、テーマに合わせてマークアップを追加できます。.masonry-entryに、きれいでわずかに丸みを帯びた境界線を追加するのが好きです。もう1つの良いオプションは、.masonry-entryに境界線がないことですが、わずかな影を付けることです。これは、投稿のサムネイルがコンテナの境界線全体に広がる場合に特に効果的です。これは、.masonry-thumbnailにすべての方向で0のmarginとpaddingを与えることで実現できます。これらのスタイルはすべて、テーマのcssディレクトリにあるmasonry.cssというファイルに追加する必要があります。

ステップ3：テンプレートにMasonryループを追加する

テンプレートパートが作成されたので、テーマ内の任意のテンプレートで使用できます。index.php に追加することはできますが、カテゴリアーカイブに使用したくない場合は category.php には追加しないでください。テーマのホームページでのみ使用したい場合は、ブログ投稿を表示するように設定されている場合、home.php で使用します。どこに選択しても、ループを id "masonry-loop" のコンテナで囲み、get_template_part() を使用してループにテンプレートパートを追加するだけです。while (have_posts() ) の前に Masonry ループコンテナを開始するようにしてください。

例えば、twentythirteen の index.php からのメインループは次のようになります。

<?php if ( have_posts() ) : ?>

    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>

    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

そして、Masonryループを使用するように変更したものがこちらです：

<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'masonry' ?>
    <?php endwhile; ?>
</div><!--/#masonry-loop-->
    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

ステップ4：Masonryアイテムのレスポンシブな幅を設定する

各Masonryアイテムの幅を設定する方法はいくつかあります。Masonryを初期化する際にピクセル数を使用して幅を設定できます。レスポンシブテーマを使用しており、小さな画面で適切に表示するには複雑なメディアクエリが必要になるため、私はその方法を好みません。レスポンシブデザインの場合、.masonry-entryにパーセンテージで幅の値を設定し、1行に表示したいアイテム数に基づいてMasonryに計算させるのが最善の方法であることがわかりました。

これには、100を、テーマのstyle.cssに単純に入力するパーセンテージを設定したいアイテムの数で割るだけです。たとえば、各行に4つのアイテムを配置したい場合は、masonry.cssファイルで次のように行うことができます。

.masonry-entry{width:25%}

ステップ5：モバイル最適化

ここで止めることもできますが、最終結果が小さなスマートフォンの画面ではあまりうまく機能しないと思います。デスクトップで新しいMasonryグリッドを使用したテーマの外観に満足したら、スマートフォンで確認してください。スマートフォンでの表示に満足できない場合は、少し作業が必要になります。

私たちのcontent-masonryテンプレートパーツに追加したすべてを電話の画面に収めるには十分なスペースがないと思います。2つの良い解決策は、電話用に抜粋を短くするか、完全にスキップすることです。これを実行するためにテーマのfunctions.phpに追加できる追加の関数を次に示します。これらの問題はタブレットでは問題にならないと思うので、このセクションのすべての例でMobbleという優れたプラグインを使用して、タブレットではなく電話でのみ変更を行います。また、Mobbleがアクティブかどうかを確認してから使用し、必要に応じてWordPressに組み込まれているより一般的なモバイル検出関数wp_is_mobileにフォールバックします。

if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            return $short;
        }
        else {
            return $long;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            return $short;
        }
        else {
            return $long;
        }
    }
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists

ご覧の通り、長い抜粋の長さと短い抜粋の長さを変数に格納することから始めます。これらの値は2回使用するため、後で変更する必要がある場合に一元管理できるようにするためです。そこから、Mobble の is_phone() を使用できるかどうかをテストします。できる場合は、電話用の短い抜粋を設定し、そうでない場合は長い抜粋を設定します。その後、wp_is_mobile を使用して同じ基本的なことを行いますが、これはすべてのモバイルデバイスに影響します。is_phone() が使用できない場合です。この関数の else 部分が使用されることはないことを願っていますが、念のためバックアップがあるのは良いことです。抜粋の長さのロジックが設定されたら、あとは関数を excerpt_length フィルターにフックするだけです。

抜粋を短くするのは1つの選択肢ですが、簡単なプロセスで完全に削除することもできます。これはcontent-masonryの新しいバージョンで、電話では抜粋全体が省略されています。

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <?php 
            //put the excerpt markup in variable so we don't have to repeat it multiple times.
            $excerpt = '<div class="masonry-post-excerpt">';
            $excerpt .= the_excerpt();
            $excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
            if (function_exists( 'is_phone') {
                if ( ! is_phone() ) {
                    echo $excerpt;
                }
            }
            else {
                if ( ! wp_is_mobile() ) {
                    echo $excerpt;
                }
            }
        ?>
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

今回は、電話/モバイルデバイスではないことを確認し、そうでない場合はループの一部である抜粋を返します。電話/モバイルデバイスの場合は何も行いません。

モバイルデバイスでは、Masonryアイテムの幅を広げ、1行あたりの数を減らすこともできます。これを行うには、デバイス検出に基づいてヘッダーに異なるインラインスタイルを追加します。この関数はwp_add_inline_stylesを使用するため、特定のスタイルシートに依存します。この場合、Masonryスタイルを分離しておくために、masonry.cssを使用します。これを使用しない場合は、すでに登録されている別のスタイルシートのハンドルを使用できます。

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide = '25%';
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

この関数はカスタムスタイルシートをキューに入れ、次に非常に馴染みのあるロジックであるはずのものを使用して幅の値を設定します。その後、{$width} を持つ、それ以外は通常の見た目のCSSに幅の値を渡して $custom_css 変数を作成します。その後、wp_add_inline_style を使用して、Masonryスタイルシートが使用されているときにWordPressにヘッダーにインラインスタイルを出力するように指示し、その後、関数全体を wp_enqueue_scripts にフックして完了です。

Masonryスタイルを既存のスタイルシートにまとめることを選択した場合、そのスタイルシートのハンドルをwp_add_inline_styleで使用するようにしてください。そうしないと、インラインスタイルは含まれません。wp_add_inline_styleを使用するのは、Masonryのエンキューアクションフックを条件でラップすることが多いため、必要な場合にのみ追加されるからです。たとえば、ブログのインデックスページとアーカイブページでのみMasonryを使用している場合は、次のようになります。

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

これらの最後のいくつかの例は、あなたの脳に他のアイデアをいくつか開くはずです。たとえば、同様のロジックを使用して、モバイルデバイスでMasonryを完全にスキップすることができます。また、wp_add_inline_style()は、あまり使用されていませんが非常に役立つ関数です。これにより、あらゆる種類の条件に基づいてプログラムで異なるスタイルを設定できます。デバイス検出だけでなく、テンプレートが使用されているか、またはユーザーがログインしているかどうかに基づいて、要素のスタイルを根本的に変更できます。

これらのさまざまな変更を、創造性を発揮する機会として見ていただければ幸いです。Masonryおよび同様のカスケードグリッドシステムはしばらく前から人気があるので、この人気のアイデアに新しいひねりを加える時期です。WordPressテーマでMasonryを使用するクールな方法をコメントで教えてください。

WordPress の多才な人物である Josh Pollock は、WordPress について執筆し、テーマ開発を行い、Pods Framework のコミュニティマネージャーを務め、持続可能なデザインのためのオープンソースソリューションを提唱しています。