EnfoldのMagazineで新着情報をカスタマイズ[WordPress]

enfo_maga_eyecatch

以前、ウィジェットを使って新着情報の一覧にカテゴリー名やNewマークを表示するようなカスタマイズを施しましたが、今回はWordpressのテーマ「Enfold」のMagazineエレメントを使って同じようなカスタマイズをしてみます。
はじまりはじまり〜。

使用環境

WordPress 4.7.2
テーマ:Enfold 4.0.7

まず、固定ページに「Magazine」エレメントを埋め込んで行きましょう。

enfo_maga_element1

「Content Elements」から「Magazine」を選び、ドラッグして配置したい場所に持っていきます。

enfo_maga_element2

配置した「Magazine」をクリックして、適宜設定してください。

enfo_maga_element3

「Enfold」はどんどん進化して、編集画面でプレビューまで見られるようになりました!
CSSを読み込んで、ほぼ実際の見え方でプレビューできますよ。


さーて、来週のサザエさんは?
カツオです。なつ婆っぱ事件でがす!ウソです。

…真面目に真面目に。
さて、Magazineエレメントのphpをカスタマイズしていきますよ。
config-templatebuilder/avia-shortcodes/magazine.php の530行目あたり
$title = で始まるコードから

と変更します。
この後は、
$separator = “<span class=’av-magazine-text-sep text-sep-date’>/</span>”; に繋がります。

今回はfunctions.php ではなく、ここでNewマークを表示したい期間を設定するので、ご注意ください!
もちろん、期間は適宜変更してくださいね。


magazine.php の584行目あたり、
$output .= “<div class=’av-magazine-content-wrap’>” で始まるコードからを

と変更します。
この後は、
$output .=  “</header>”; に繋がります。


もちろん実際に使う際は、CSSで調整してくださいね。
サイトのデザインに合った感じにしてもらえればと思います。