WordPressでサイトを作る時にEnfoldというテーマをよく使います。
定期的にバージョンアップが行われ、どんどん使いやすく進化するので、かなり有望な相棒です。ボボボーボ・ボーボボです。
完成度の高いデモも用意しているし、「Advanced Layout Editor」というエディタで積み木のようにページを組んでいけるので、制作スピードもアップってもんです。
ただ、どんなテーマもそうですが、「ここちょっとカスタマイズしたいなぁ〜」という事もあるんですよね。
今回は新着情報のリスト表示をカスタマイズしてみます。
使用環境
WordPress 4.5.3
テーマ：Enfold 3.6.1
新着情報の一覧だと、カテゴリー名を表示したくないですか？
これが標準では備わっていないんですよね。ちょっと残念。
また、投稿して何日以内なら「New」マークとか付けたいですよね？
そんなこんなで方法を考えてみました。
Enfoldには「Magazine」というエレメントが用意されているのですが、ちょっとカスタマイズが難しかったので、今回はウィジェットを読み込む方法をとりました。
［追記］Magazineエレメントにもちゃんと対応させましたよ！
→ 「EnflodのMagazineで新着情報をカスタマイズ」
では、実際に固定ページにウィジェットを埋め込んでいきますね。
まず、「外観」→「ウィジェット」を選んで、「Enfold Custom Widget Area」を追加します。
今回は「Top Newslist」という名前にします。
今作った「Top Newslist」を配置する固定ページを開いて、「Content Elements」から「Wiget Area」を選び、ドラッグして配置したい場所に持っていきます。
で、「Top Newslist」を選んでおきます。
これで新着情報の一覧を表示することができます。
↑で設定したウィジェットの表示をカスタマイズするため、テーマの該当するphpをカスタマイズしていきますよ。
framework/php/class-framework-widgets.php の543行目あたり
$time_format = で始まるコードから
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// 時間を消す $time_format = apply_filters( 'avia_widget_time', get_option('date_format'), 'avia_newsbox' ); /* カテゴリー追加 */ $cat = get_the_category(); $catname = $cat[0]->cat_name; //カテゴリー名 $catslug = $cat[0]->slug; //スラッグ名 echo "<a class='news-link' title='".get_the_title()."' href='".$link."'>"; $nothumb = (!$image) ? 'no-news-thumb' : ''; echo "<span class='news-thumb $nothumb'>"; echo $image; echo "</span>"; if(empty($avia_config['widget_image_size']) || 'display title and excerpt' != $excerpt) { // 日付とタイトルを入れ替える echo "<strong class='news-headline'>"; if($time_format) { // カテゴリーを追加 echo "<span class='news-time'>".get_the_time($time_format)."</span><span class='cate-name $catslug'>".$catname."</span>".get_the_title(); } // 日付とタイトル ここまで /* Newマークを入れる */ add_new(); echo "</strong>"; } echo "</a>"; |
と変更します。
この後は、
if(‘display title and excerpt’ == $excerpt) に繋がります。
＊時間は要らなかったので、消しました。
＊日付とタイトルの順番を逆にしたかったので、変更しました。
あと、functions.php に、
|
1 2 3 4 5 6 7 8 9 10 |
// Newマークを入れる function add_new(){ $days = 7; //Newを表示させたい期間の日数 $today = date_i18n('U'); $entry = get_the_time('U'); $total = date('U',($today - $entry)) / 86400 ; if( $days > $total ){ echo '<span class="newMark">New!</span>'; } } |
と処理を追加して、Newマークを表示したい期間を設定しておきます。
※期間は、適宜変更してくださいね。
CSSでの調整も必要ですが、
サイトのデザインに合った感じに適宜設定してもらえればと思います。
