以前、ウィジェットを使って新着情報の一覧にカテゴリー名やNewマークを表示するようなカスタマイズを施しましたが、今回はWordpressのテーマ「Enfold」のMagazineエレメントを使って同じようなカスタマイズをしてみます。
はじまりはじまり〜。
使用環境
WordPress 4.7.2
テーマ：Enfold 4.0.7
まず、固定ページに「Magazine」エレメントを埋め込んで行きましょう。
「Content Elements」から「Magazine」を選び、ドラッグして配置したい場所に持っていきます。
配置した「Magazine」をクリックして、適宜設定してください。
「Enfold」はどんどん進化して、編集画面でプレビューまで見られるようになりました！
CSSを読み込んで、ほぼ実際の見え方でプレビューできますよ。
さーて、来週のサザエさんは？
カツオです。なつ婆っぱ事件でがす！ウソです。
…真面目に真面目に。
さて、Magazineエレメントのphpをカスタマイズしていきますよ。
config-templatebuilder/avia-shortcodes/magazine.php の530行目あたり
$title = で始まるコードから
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// $title = "<a href='{$link}' {$titleAttr}>". apply_filters( 'avf_magazine_title', get_the_title( $entry->ID ), $entry ) ."</a>"; $title = apply_filters( 'avf_magazine_title', get_the_title( $entry->ID ), $entry ) ; /* edit 201705 */ $titleTag = "h4"; /* edit 201705 */ $excerpt = ""; $time = get_the_time(get_option('date_format'), $entry->ID); // Newマークを入れる edit 201708 $days = 10; //Newを表示させたい期間の日数 $today = date_i18n('U'); $entrytime = get_the_time( 'U', $entry->ID ); $total = date('U',($today - $entrytime)) / 86400 ; if( $days > $total ){ $addnew = '<span class="newMark">New!</span>'; } // END Newマークを入れる // カテゴリー追加 edit 201705 $cat = get_the_category( $entry->ID); $catname = $cat[0]->cat_name; //カテゴリー名 $catslug = $cat[0]->slug; //スラッグ名 // END カテゴリー追加 |
と変更します。
この後は、
$separator = “<span class=’av-magazine-text-sep text-sep-date’>/</span>”; に繋がります。
今回はfunctions.php ではなく、ここでNewマークを表示したい期間を設定するので、ご注意ください！
もちろん、期間は適宜変更してくださいね。
magazine.php の584行目あたり、
$output .= “<div class=’av-magazine-content-wrap’>” で始まるコードからを
|
1 2 3 4 5 6 7 8 9 10 |
$output .= "<div class='av-magazine-content-wrap'>"; $output .= "<header class='entry-content-header'>"; $output .= "<span class='cate-name $catslug'>".$catname."</span>"; /* edit 201705 */ // $output .= "<time class='av-magazine-time updated' {$markupTime}>".$time."</time>"; $output .= $separator.$author_output; $output .= $addnew; /* edit 201708 */ $output .= "<a href='{$link}' {$titleAttr}>"; /* edit 201705 */ $output .= "<{$titleTag} class='av-magazine-title entry-title' {$markupTitle}>{$title}</{$titleTag}>"; $output .= "<time class='av-magazine-time updated' {$markupTime}>".$time."</time>"; $output .= "</a>"; /* edit 201705 */ |
と変更します。
この後は、
$output .= “</header>”; に繋がります。
もちろん実際に使う際は、CSSで調整してくださいね。
サイトのデザインに合った感じにしてもらえればと思います。
