(このページは2022年11月15日に更新しました)
本記事の内容
「WordPressは一通り使える様になっている方向け」
「What’s New Generatorは１つしか入れられないが２パターンの動きを実装する」
「プラグインを改造する」
本サイトでは、WordPress&Cocoonでより良いデザインが出来るようにプラグインを活用する方法をご案内しております。
過去の記事・・・
【Cocoonカスタマイズ】MetaSliderを使ってスタイリッシュなブログをデザインする
今回はその中でも新着記事に注目し、これらの疑問にお答えしていきたいと思います。
What’s New Generatorの設定方法
まず、新着記事に欠かせないのが、このWhat’s New Generatorのプラグイン。
新着記事プラグインの定番です。
こちらを使うと、下記の様なリストを簡単に作ることが出来ます。
設定は簡単です。
プラグイン導入後、メニューを開きます。
順番に
- タイトル
- 表示するコンテンツの対象
- スラッグ
- 表示件数
- Newマークが表示される期間の設定
を行います。
そしたら、一番上のショートコードをコピーして、表示させたい箇所に貼り付けます。
設定は、これだけ。
ここまでは、いたって簡単ですが、本題はここから。
問題点
こちらの方法で新着情報を表示することが出来るようになりますが、この場合、表示件数を３にしてしていますので、新着記事だけの固定ページ作成しようとした場合、全ての記事を表示することができません。
今回は、これを解決します。
What’s New Generatorの設定
まず、What’s New Generatorの表示件数を希望の最大数へ変更します。（MAX30）
新着記事一覧の固定ページを作成します。ショートコードを貼り付けだけですので、簡単です。
記事の入力はこれだけで希望の数（30と入力したのであれば30件の新着記事）の一覧が表示出来ます。
今回は、この一覧を、別のページでTOP3記事のみを表示させることを想定して説明します。
これには、プラグインのphpファイルを直接編集します。
プラグインのphpファイルの編集
ファイルの場所は、WordPressがインストールされているフォルダ内の、wp-content>plugins>whats-new-genaraterを開き、whatsnew-view.phpを下記の様に編集します。
<div class='whatsnew'>
<?php if ( $info->title ): ?>
<?php echo '<'.$info->title_tag.'>'.$info->title.'</'.$info->title_tag.'>'; ?>
<?php endif; ?>
<hr/>
<?php $i = 0 ?> //------追加
<?php foreach($info->items as $item): ?>
<?php $i++ ?> //-----追加
<?php if($i == 4){echo "<div id='whatsnewdel'>";} ?> //-----追加
<dl >
<a href="<?php echo $item->url; ?>">
<dd>
<?php if ( $item->newmark ): ?>
<span class='newmark'>NEW!</span>
<?php endif; ?>
<?php echo $item->title; ?>
</dd>
</a>
</dl>
<hr/>
<?php endforeach; ?> //-----追加
<?php echo "</div>" ?>
</div>
変更点は、７行目、１０行目、11行目、2４行目。
これらのコードを追加します。
<?php if($i == 4){echo "<div id='whatsnewdel'>";} ?>
28行目のこのコードにより、４番目から最後までのランキングを、id=”whatsnewdel”で括ります。
表示される範囲を変更したい場合は、（$1 == ）の右の数字を任意の数字に変更します。
このid=”whatsnewdel”括った4番目から最後までのHTMLを、javascriptを使って非表示にします。
javascriptの設定
javascriptでは下記の様にコードを入力します。
コードを書く位置は、そのページのカスタムHTMLに入力します。
<script>
if(document.URL == "https://wis-labo.com/"){
document.getElementById("whatsnewdel").style.display = "none";
}
</script>
2行目のURLは、３位までのランキングを表示するページのURLを正確に入力します。
3行目のコードでid”whatsnewdel”を非表示にします。
これにより、このページでは３位まで、固定ページでは30位までを表示する２つのパターンでの表示が可能になります。
まとめ
いかがでしたでしょうか？
今回は、２つのパターンのでの実装でしたが、コードを追加すれば、様々なパターンで利用可能です。
ご自身のサイトに合わせてカスタマイズしてみてください。
最後までお読みいただきありがとうございました。
What’s New Generatorを導入するなら読んでおきたい記事
コメント