トップページのカスタマイズの際に作成した、人気記事と最新記事を出力するテンプレートを公開します。
私はカテゴリー別最新記事を最下部に置きたかったのでこのテンプレートは使用しませんでしたが、オリジナルのトップページを作りたい方にはわりと汎用性があるかもしれません。
もくじ
テンプレート用ファイルのダウンロード
最下部に人気記事・最新記事を出力するテンプレート
最上部に人気記事・最新記事を出力するテンプレート
実装方法
テンプレートファイル
テンプレートファイルのダウンロード
上のボタンからZIPファイルをダウンロードしてください。
展開する
ダウンロードしたZIPファイルを展開すると、中に2つのファイルが入っています。
- custom_widget.php
- page-forfront-custom.php または page-forfront-customt.php
中身をアップロードする
これを自分のサーバーのSANGOテーマ直下にアップロードします。
wp-content > themes > sango-theme
にアップロードする
にアップロードする
function.php
子テーマの function.php に以下をコピペしてください。
WordPress > 外観 > テーマの編集 > function.php
から編集できます
から編集できます
function.php
//ショートコード化のためのウィジェット
register_sidebar( array(
'id' => 'custom_shortcord',
'name' => 'ショートコード化するウィジェット',
'description' => 'ここに追加したウィジェットを、記事内などにショートコードで表示させることができます。',
'before_widget' => '<div class="widget custom_sc">',
'after_widget' => '</div>',
) );
//ウィジェットを呼び出すショートコード
function add_widget_func($params = array()) {
extract(shortcode_atts(array(
'file' => 'default'
), $params));
ob_start();
get_template_part($file,'');
return ob_get_clean();
}
add_shortcode('add_widget', 'add_widget_func');
ウィジェットの設定
WordPress > 外観 > ウィジェット と進むと、ウィジェットの設定画面に新しいウィジェットエリアが出来ています。
この「ショートコード化するウィジェット」というエリアに、人気記事と最新記事のウィジェットを追加してください
トップページでの表示件数・タイトル名は、ここで設定したものが適用されます。
MEMO
ここでは当サイトのトップページと同じく人気記事・最新記事を出力させる方法を説明していますが、このウィジェットエリアに別のウィジェットを追加すればそちらがトップページに表示されるので、色々な使い方ができるかと思います。(CSSは人気記事・最新記事の表示に対応するものしか実装していないため、各自調整する必要があります)
完成
これでテンプレートが実装されました。あとは固定ページを新規作成し、「トップページ用1カラム(カスタム)」or「トップページ用1カラム(カスタムTOP)」というテンプレートを選ぶだけです。
本文の部分は何でも自由に記述できるので、SANGO のショートコードでカテゴリー記事を呼び出したり画像やテキストなどを入れたりして、オリジナルのトップページを作成することができます。
補足
人気記事・最新記事のタイトル部分の色を変更する
各ウィジェットのタイトル部分の背景色を変更したい場合は、以下のCSSを本文内または子テーマの「style.css」にコピペして上書きしてください。
固定ページ / style.css
.page-template .my_popular_posts h2, .page-template .custom_sc h2, {
background: 【背景色】; /*タイトル(見出し)部分の背景色*/
color: 【文字色】; /*タイトル(見出し)の文字色*/
font-size: 1.3em; /*文字の大きさ*/
}