【SANGO】人気記事・最新記事を出力するトップページ用テンプレート配布

トップページのカスタマイズの際に作成した、人気記事と最新記事を出力するテンプレートを公開します。

私はカテゴリー別最新記事を最下部に置きたかったのでこのテンプレートは使用しませんでしたが、オリジナルのトップページを作りたい方にはわりと汎用性があるかもしれません。

テンプレート用ファイルのダウンロード

最下部に人気記事・最新記事を出力するテンプレート

テンプレート1

最上部に人気記事・最新記事を出力するテンプレート

テンプレート2

実装方法

テンプレートファイル

テンプレートファイルのダウンロード

上のボタンから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; /*文字の大きさ*/
}