WordPress

WordPress★固定ページに特定の記事を表示させる

投稿日:

やりたかったこと

あるカテゴリのトップページとして用意した固定ページに、そのカテゴリの最新の投稿記事を1つだけ表示させる。

動きとしては、
1.投稿記事から該当するカテゴリの記事を絞り込む
2.日付順に並べて最新の記事を選ぶ
3.固定ページの任意の位置に記事を表示させる
という流れでいけそう。
テーマは「emanon-free」を使っているので、カスタマイズしていきます。

ファイルを子テーマに複製

テーマ「emanon-free」では、「templates」フォルダに、編集画面の「投稿の属性」で指定するテンプレートファイルが収まっています。新たにテンプレートファイルを作って、ここから選択できるようにします。

emanon-free>templatesの中にある「right-sidebar.php」を複製します。
複製したファイルにわかりやすい名前を付けて保存。
ファイルを開いて最上部にある「Template Name:」を変更。ここで付けた名前が「投稿の属性」のプルダウンメニューに表示されます。

コードを見ると、「content-page.php」というファイルで記事を表示させていることがわかったので、テーマフォルダ直下にある「content-page.php」も複製します。「content-○○○.php」の「○○○」で呼び出すファイルを切り替えています。

<今回複製したファイルとディレクトリ>

emanon-free-chaild(子テーマ)
 ┃
 ┣ content-cat.php(複製してリネーム)
 ┃
 ┗  templates
    ┃
    ┗ right-sidebar-cat.php(複製してリネーム)

 

複製したファイルのコードを編集

right-sidebar-cat.phpの編集

  • 「Template Name: サイトバー:右」を変更
    ==>ここで付けた名前が「投稿の属性」のプルダウンメニューに表示されます。
  • 「Template Post Type: page」を追加
    ==>編集しているのが固定ページのときだけ「投稿の属性」からこのファイルが選択できるようになります。
  • ファイル中ほどにある<main>〜</main>のコードを編集

4行目のコードに複製した「content-cat.php」のファイル名をあてはめます。

 

content-cat.phpの編集

  • <header>〜</header>内の不要なコードを削除
  • <section>〜</section>を別のコードに全て置き換え

取得したデータの本文を表示させるコード

記事一覧を表示させるコードはたくさん解説があったけど、記事本文をゴソッと表示するコードがわからなくて苦労しました。シンプルに「the_content();」でよかったんですね。

動作テストは成功!
思った通りの動きになりました!

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

WP★ページごとにnoindexの設定をする

サンキューページなど、検索したときに表示しなくてもよいページに「noindex」のメタタグをつけておくと、SEOに効果的とのこと。 下のタグをheader内に入れます。 <meta name=” …

WordPress★プラグインなしでページのトップへ戻るリンクを設置

ページのトップへ戻るボタンを設置するとき、プラグインを使うか自作するか。。。いつも迷ってしまう。プラグインは便利で簡単だけど、使わない機能もたくさんついてくるし、余分なデータは極力省きたい。だから、今 …

WP★フロントページの背景色を変更する★Twenty Seventeenをカスタマイズ04

フロントページの背景色をパネルごとに変更する方法 フロントページを複数指定している場合、設定した固定ページを順番に表示させています。 このとき 各セクションごとに背景色を変更する方法です。 CSSを追 …

WP★管理画面の投稿一覧の表示数を増やすには?

管理画面の投稿一覧で投稿の並べ替えをするときに「もっと表示件数を増やせればいいのになぁ……」と思って調べてみました。とってもカンタン! 管理画面で投稿一覧の表示数を増やす方法 投稿一覧を開き、画面の右 …

WPプラグイン「Crayon Syntax Highlighter」のテーマ一覧

WordPressでコードを表示させるプラグインで「Crayon Syntax Highlighter」というのがあります。表示させるテーマもたくさんあって便利なのですが、どのテーマがどんな風にみえる …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。