公開日:2017年8月31日PlusersWordPrssにはデフォルトのウィジェットがいくつか用意されていますが、『人気記事』を出力するためのウィジェットは用意されていません。ユーザーにより多くの記事を読んでもらうためにも、『人気記事』をウィジェットに追加して簡単に出力できるようにしておきましょう。人気記事の出力方法さえわかれば、ウィジェットで出力するだけでなく、WordPressの各テンプレートでも出力できるようになりますよ!今回は、プラグインを使わずにウィジェットに『人気記事』を出力する方法についてご紹介します。※人気記事を出力するためには、カスタムフィールドに記事の閲覧数をカウントするための値を保存しておく必要があります。投稿数をカスタムフィールドに追加するプラグインを有効化するか、link:『記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する』を参照し、カスタムフィールドに記事の閲覧数をカウントするための設定を予め行なってくださいCONTENTSループを使って人気記事一覧を出力する要素を作成する人気記事を出力するために必要なサブループの配列ループ内の要素を追加するウィジェットを追加するための関数を作成するCSSで人気記事一覧のデザインを整えるループを使って人気記事一覧を出力する要素を作成するウィジェットを作成する前準備として、まずは、人気記事を出力するための要素を作成します。今から作成する要素は、後ほどfunctions.phpに入れ込むので一時的なファイルを作成し記述してください。追加するソースコードは、下記の通りです。</ul></aside>上記のソースコードで、人気記事の一覧を出力することができます。人気記事は、サブループの『WP_Query』で出力します。ループの条件を指定する前に『get_the_ID();』で記事の情報を取得しましょう。一つ一つの要素については下記の通りです。人気記事を出力するために必要なサブループの配列meta_keyカスタムフィールドの参照先を指定することができます。今回は、記事のView数を参照したいので『記事のアクセス数をプラグインなしで計測しWordPressの管理画面に表示する』でカスタムフィールドに設定した『post_views_count』を参照するようにしています。プラグインなどでカウントしている場合は、設定されているカスタムフィールド名を入力してください。orderby取得した記事を並びかえる際に参照する値を指定します。今回は、カスタムフィールドの値『数字』で並び変えるので『meta_value_num』を指定してします。order並び替える条件を指定します。今回は、人気記事をランキング形式で出力するので降順に並び替える『DESC』を値として入力してください。昇順で並び替えたい場合は『ASC』を入力してください。posts_per_page出力したい記事の数を指定します。通常のサブループでは、数字で指定しますがウィジェットを追加する際に指定した値を入力したいので『$number』と記述しています。この変数『$number』についてはウィジェット化する際に設定します。上記の4つの条件を指定して人気記事を呼び出します。指定した条件を繋げると『post_views_countの値で記事を参照しカスタムフィールドの値が多い順にウィジェットで指定した記事数出力する』となります。上記のサブループの値を使用することで、ウィジェットに限らずWordPressテーマ内の好きな場所に人気記事を出力することができます。?>』の記述を行いループをリセットしてください。ループ内の要素を追加するループの記述が終わったら、『ランキングの順番』『サムネイル画像』『タイトル』『所属カテゴリ』を出力するコードをループ内に記述しましょう。?></span>ランキングの順位は、ループの回数をカウントして順番として出力します。?>"』としておくことで、ランキングの順位ごとに『r-count1』『r-count2』という感じでclass名が変更され、順位ごとにカラーを変更することができるようになります。ランキングの順位ごとにカラーを設定したい場合は、記述しておきましょう。※上記のソースコードだけでは、ランキングは表示されません。サブループの記述の中に『$loopcounter++;』という変数を追加してください。?>』の部分で出力していますが、サムネイルを設定していない場合は出力されません。サムネイルの設定がない場合を考えて、条件分岐を追加しておいても良いでしょう。$postcat[0]->name;』でカテゴリの名前を呼び出すようにしましょう。人気記事の一覧を出力するための要素は以上です。好みに合わせて要素を省いたり、追加したりして調整してください。続いて、上記の要素をウィジェットにするための設定をしていきましょう。ウィジェットを追加するための関数を作成する人気記事を出力するための要素を作成したら、ウィジェットとして呼び出すための関数をfunctions.phpに定義していきます。複数の関数を使用するため、記述ミスに注意しましょう。functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。}}register_widget('Popular_Posts');上記の記述をfunctions.phpに追加することで、ウィジェット項目に『人気記事』が追加されます。コード内の『<!--ここにウィジェットとして呼び出したい要素を記述-->』の部分に、先程作成した人気記事に出力するための要素をコピペして挿入してください。独自ウィジェットを作成する際の関数は、下記の通りです。{}/*ウィジェットを実行するための処理*/register_widget('ウィジェットクラス名');ウィジェットをWordPressに追加するための関数です。WP_Widget』の中にウィジェットを構成する全ての内容を記述します。);}自作ウィジェットの名前やidなどを定義します。IDは表示に直接影響を与えるものでなく内部的な振り分けを指定するものです。ウィジェットの名前と説明はウィジェット管理画面に反映されます。formウィジェット管理画面上のカスタムフォームを作成します。今回作成する人気記事ウィジェットでは、タイトル(title)と記事の表示件数(number)を任意で指定できるようにしています。update管理画面上の入力フォームに入力した値を保存する処理を行います。[number]の欄に値が入力されていない場合の処理もここで指定しています。widgetウィジェットに表示させたい要素を設定します。『$before_widget』に記述した値が、ウィジェットのタイトルとして表示されます。{~』で設定しておきましょう。今回は、『人気記事』がタイトルで出力されるようにしています。functions.phpの関数がきちんと反映されていれば、管理画面上のウィジェットの項目に『人気記事』というウィジェットが新しく追加されます。設定が完了したら、ページに表示されるようにサイドバーに追加してください。追加すると『人気記事』がサイドバーに出力されますので、要素が表示されているかを確認しましょう。CSSで人気記事一覧のデザインを整える人気記事の一覧が、WordPressウィジェットとして出力されているのを確認したら、CSSでデザインを整えていきましょう。下記にデモCSSを載せておきますので、自分好みにカスタムして使用してください。80px;}上記のCSSをそのまま記述すると上記の画像のように表示されます。以上で、『人気記事』のウィジェットの作成は完了です。タイトルや記事数を自由に指定して、人気記事を出力しましょう。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。