2015-12-11

【WP】「WP Masonry Layout」の設定方法と使い方とカスタマイズ

私が「about Fashion」のトップページで使用している、ちょっと「Pinterest」っぽいデザインのレイアウトは、「WP Masonry Layout」というプラグインを使用して作っています。ページを開くと写真がパパパパッと出てきてなんかいい感じ。写真がメインなので、見やすいようにしようしたくて、このレイアウトに決めたわけですが、自分の思ったように表示するの、すごく大変でした。原因は私のスキル不足なんですけど。とりあえず、なんとかやっと思った通りにできたので、そのカスタム方法を書いておきます。たぶん、私ができたので、初心者の方でも大丈夫と思います。あと、直接プラグインデータに手を加えていますので、元に戻せなくなると困ったことになります。必ずバックアップをとってから作業を開始してください。

■WP Masonry Layoutを自分好みにカスタマイズ

最初に、書いておくと、レスポンシブ対応にできるのは、有料のプロバージョンのみなので、無料でいきたい私は、そこ妥協しました。PC画面で2列で表示されているブロックはスマホでも2列。PCで3列はスマホでも3列です。4列なら4列。冒頭の写真、4列にしていてPC画面ならいい感じなのですが、ほら…。

PCに合わせて細かくしすぎちゃうと、スマホ画面で見たときすごく見づらいのでご注意ください。スマホでも読まれることを前提としたサイトだと、たぶん2列くらいがベストなんじゃないかと思います。

■まずは「WP Masonry Layout」を有効化

ダッシュボードから「プラグイン」→「新規追加」でWP Masonry Layoutをインストール。そして有効化してください。そうするとここに出てきます。

■お好みの表示を設定する

ダッシュボードの「WP Masonry」から「Shortcodes」を選択。

好きなレイアウトを作ったら、ショートコードをはきだしてくれるので、複数種のレイアウトを作って保存しておけるのもうれしいですね。出来上がったショートコードを、このレイアウトを表示させたい場所に貼り付けるだけです。設定は、自分の好みに合わせてこんな感じで。

■表示したい場所にショートコードを貼る

もろもろ入力したら、最後に「Save」をクリック。そうするとページ上部にこんなショートコードが出てきます。

これをコピーして、表示したい場所に貼るだけ。あと、もし修正したい場合は、「Edit」をクリックすると保存されたデータが表示されるので、修正してまた「Save」すれば大丈夫です。

私は、固定ページに貼り付けて、カテゴリーカテゴリーページの目次みたいにしたかったので、こんな感じで書きました。

テキストモードの状態で書き込みます。

■「Pinterest」風にレイアウトできている、はず!

ここで、すでに思った通りにできていてご満足いただけたなら、それはおめでとうございます。ここで終了です。

私の場合は、横幅に対して2列って指定したのに、こうなっちゃいまして。

スマホはちゃんと2列出るんですけどね。

これはなんか左寄りでかっこ悪い。ということで、まずは、

■横2列って設定したんだからちゃんと横2列で出てきてよ

ダッシュボードから「プラグイン」→「プラグイン編集」。右上の「プラグイン編集」から「WP Masonry Layout」を選んで「選択」をクリックします。右側にいろいろ書いてありますが、その中から「wp-masonry-layout/css/wmlc_client.css」を選んでクリックします。

下記のようなコードが書いてあるので、下図の部分のパーセンテージをちょっと変更。変更したら、下のほうの「設定を更新」をクリック。

これで、ちゃんと横2列表示されるようになりました。でもこれ使う人のPC画面の幅によって見え方が変わるので、正解かわからない…。

とりあえず、これでレイアウトはOKです。パーセンテージは、希望のブロック数とかに応じで適宜変えてみてください。

■表示する要素を変えたい

デフォルトだと、写真の下に、コメント数が自動で出るようになっています。

でも私のページ、コメントなんてほぼないんで、全部「0 Response」。これいらなくね? ということで、この部分を日付に変更します。

それから、本文の冒頭も表示されるのですが、これスマホで見るときちょっとうざいので、いっそ取っちゃえということで、消すことにしました。ほら、なんか文字だらけ。

変更する部分は、「wp-masonry-layout/themes/default/layout.php」です。ダッシュボードから「プラグイン」→「プラグイン編集」。右上の「プラグイン編集」から「WP Masonry Layout」を選んで「選択」をクリックします。右側にいろいろ書いてありますが、その中から「wp-masonry-layout/themes/loader.php」を選んでクリックします。

その画面の右側にまたいろいろ書いてありますが、その中から「wp-masonry-layout/themes/default/layout.php」選んでクリック。

レイアウトのphpコードが表示されます。

そこで表示されたコードを下記のように変更します。

<div class="wmle_item_holder <?php echo $shortcodeData['wmlo_columns'] ?>" style="display:none;">
    <div class="wmle_item">
        <?php if ( has_post_thumbnail() ) :?>
            <div class="wpme_image">
                <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail($shortcodeData['wmlo_image_size']); ?></a>
            </div>
        <?php endif; ?>
        <div class="wmle_post_meta">
           <a href="<?php comments_link(); ?>"><?php the_time(__('Y-m-d')) ?></a>
        </div>
        <div class="wmle_post_title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        
        </div>
    </div><!-- EOF wmle_item_holder -->
</div><!-- EOF wmle_item_holder -->

<div class="wmle_item_holder <?php echo $shortcodeData['wmlo_columns'] ?>" style="display:none;">

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

</div>

<?php endif; ?>

</div>

</div>

</div>

上記そのまま差し替えてもらえれば、
・「0 Responsive」が投稿日になる
・本文表示欄が消える
の2点が修正されると思います。

スマホだとこうなります。

■タイトルの文字が気に入らない

すっきりといい感じになってきた! でも、投稿タイトルの文字、何か色が薄くて目立ってないし、太字になってるから読みづらいし。これも変えちゃえ! ということで、ここも修正します。

変更する部分は、「wp-masonry-layout/themes/default/style.php」です。ダッシュボードから「プラグイン」→「プラグイン編集」。右上の「プラグイン編集」から「WP Masonry Layout」を選んで「選択」をクリックします。

右側にいろいろ書いてありますが、その中から「wp-masonry-layout/themes/loader.php」を選んでクリックします。その画面の右側にまたいろいろ書いてありますが、その中から「wp-masonry-layout/themes/default/style.php」選んでクリック。

そこで表示されたコードの下記の箇所を好みに合わせて変更します。

私が変えたところは、
・太字じゃなくて、普通の文字にしたかったので、「bold」(太字という指示)を「none」に変えました。
・文字の色：私のデザインテーマのフォントの色に合わせて♯333に変えました。スミ文字がいい人はBLACKでもOK。

そして、完成したのがこちら!

やっとできました。

スマホだとこうなります。

自分の中では、とても見やすくなったような気がしています。

専門的な知識、ほぼゼロの私の説明なので、分かりづらいかと思いますが、これが精一杯です。ご容赦ください。もしかして誰かのお役にたてれば幸いです。

タグ: ブログ, WordPress, プラグイン, 使い方, WP, トラブル, WP Masonry Layout

コメント4件

+foto より:

2016-08-12 02:32

とても参考になる記事ありがとうございます。
特に「WP Masonry Layout」の記事なんども読んで利用させていただきました。
少し、ご質問させていただきたいのですが、

「about FASHION」のページを開いたとき、「WP Masonry Layout」独特のロード時間がなくパッと表示されるのはどこかを扱っていらっしゃるのですか？

それと、わたしが使った場合、最初にロードしたときに画像が重なってしまって、うまく画像の高さが取得できていないようなのですが、そのような現象は mayumi さんのサイトではありませんでしたでしょうか？

わたしは東南アジアの方を旅してまして、
ネットでお仕事しようと思っても停電などには悩まされます。
mayumiさんのこれからの旅路もご安全であることを願っております。

返信

mayumi より:

2016-08-12 10:09

＋fotoさん
コメントありがとうございます！！
about FASHIONのところは、とくにいじってないです。むしろやり方がわかりません´д` ;

私は画像のサイズ、すべて同じにしているので、ずれたことはないのですが…
いかんせん素人なもんで、探り探りです！！
アフリカも同じくネット環境が絶望的なので、悩まされ続けています。
WiFi難民みたいになってますー！！
でもこればっかりはなあ…なんとかなるといいんですけどねえ。
お互い頑張りましょうo(^▽^)o

返信

プクーより:

2016-06-30 02:31

今は使ってないかもですが
WP Masonry Layout
無料でもレスポンシブに対応しましたよ。

WP Masonry Layoutを調べていてこのサイトを知りました。

とても面白いブログです。

一点、アフリカとかだとLANの環境とかで更新きつい時とかないですか？

健康に気を付けて継続してください。

返信

mayumi より:

2016-06-30 09:08

プクーさん
コメント＆ありがたいアドバイスありがとうございます！！
まだ使ってるペースあるんです！レスポンシブ対応、うれしい！！
ブログ、褒めていただいて恐縮です(o^^o)
アフリカ、ブログ更新はなかなかにハードモードです！！シムフリー携帯でデザリングとかやってみてるんですが、写真あげてしまうとあっという間に容量使い切ってしまうんですよね…。
ただ、今のところ、全くWiFi環境にあやかれないほどの国はなく、この先モザンビーク、マラウィあたりが不安です笑。
でも、なんとかがんばりたいなあと思っております！！
またぜひ遊びにいらしてください！

追加情報も感謝です！しっかり目を通してみます！

返信