【niumo様】WordPressのTwenty Twelveテーマでトップページに固定ページの内容と最新の投稿を表示したい。

niumo様から「トップページに固定ページの内容と最新の投稿を表示したい。」というご質問を頂きました。テーマにそのような機能がない場合はPHPによるカスタマイズが必要です。プラグインを利用する方法なども合わせてご紹介しています。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress SEO対策 アフィリエイト 無料相談


Twenty Twelve トップページに固定ページの内容と最新の投稿を表示したい

こんばんは。ホームページ作成を初めてwordpressでしようとしている超初心者です。書籍を読んで独学しています。

Twenty Twelveのテーマを使い、順調に作成中ですが、トップページが思うようにいきません。
トップページには
A: ヘッダーに画像を出す。
B: ヘッダー画像の下に固定ページで作ったフロントページを出す(三行くらいの文字列のみ)。
C: Bの下には最新の投稿を表示する。
このようにしたいのですが…AとBもしくはAとCはできるものの、BとCをどちらも出すことができません。どちらか片方になってしまいます。

スポンサーリンク

書籍を見ると、CSSというものを書き換えるとオリジナルテーマが作れるとのことでしたが、そういった編集が必要ということでしょうか?
ただ、テーマの選択画面に出てくるTwenty Twelveのサンプル画面を見ると、私がやりたいような構成にできているように見えるので、書き換えずに実は出来るのではないかとも思いました。

アドバイス等頂けるようでしたらありがたいです。

フロントページに固定ページと新着情報を出す方法

>niumo さん
コメントありがとうございます!「固定ページの内容と新着情報を出したい。」これは自分も勉強したての頃に悩んだものです。

結論を言ってしまうと、Twenty TweilveでBとCを両立することはできません。多くのテーマはこのようになっているかもしれません。なぜかというと、固定ページを表示させるファイルと新着情報を表示させるファイルが違うためです。

B: フロントページ (front-page.phpやpage.phpなど)
C: 最新の投稿(home.php や index.php など)
※実際にはさらにテンプレート(content-XXX.php)が呼び出されています。

◆TOPページに任意のテキストと、新着情報を表示する
これを実現するためには、
1.新着情報を表示しているPHPファイルに直でテキストを書き込む
2.フロントページのPHPファイルに新着を表示するコードを追加する
などのPHPカスタマイズが必要です。
テーマファイル /wp-content/themes/twentytwelve
のファイルを編集する必要性は出てきます。
少しPHPを勉強すればできるのは1の方かもしれません。

PHPのカスタマイズ

もしPHPのカスタマイズに挑戦するつもりであれば、「テンプレート階層」についてしっかり学ぶことをお勧めします。
WordPress codex テンプレート階層

そして、勉強の際には<!-- いま〇〇だよ! --> といったHTMLのコメントアウトをコード内に記載して、ブラウザで確認したときにどのPHPファイルが今使われているのかを確認してみましょう。(ブラウザ 右クリック ソースを表示 / 検証 などで、ページのソースコードを確認する)

プラグインを利用する

PHPを勉強する時間がないという場合は、
3.プラグインを使い、固定ページにショートコードで記事の一覧を表示する
という方法を提案します。
こちらの記事も参考にして下さい。
Root-013 PHPを書かなくても新着情報を表示できる3つのプラグインを比較

これであれば、固定ページの任意の場所に新着情報を表示することができます。
CSSの知識を身につければ、デザインも変えることができるでしょう。

>CSSというものを書き換えるとオリジナルテーマが作れる
というのも間違いではありませんが、構成などに関わる部分には必ずHTML PHPの知識が必要になってきます。(おそらくサンプルはPHPをカスタマイズしたものかと思います。)
CSSはあくまで文字の色を変えたり、大きくしたりなど、「装飾やレイアウト」に関わるものです。

僕も最初はCSSだけでなんとかしようとしたものですが、やりたいことをきちんと形にしようとするとHTMLやPHPのカスタマイズは必須でしたね^^;
参考になれば幸いです。またなにかありましたらコメント下さい。

追記 カスタマイズの手がかり・調べ方

テーマを見て、wp_XXXとか、get_XXXとかthe_XXXとか、そういった関数はWordPress独自の関数が多いのでまずは調べてみることです。
wpdocs.osdn.jp 関数リファレンス

注意点として、function.phpはカスタマイズでエラーが出ると画面が真っ白になります。ログインも出来なくなりますがバックアップをとって古いファイルからやり直せば大丈夫です。
他のテーマファイル(.php)はほとんど大丈夫なのでまずは色々試してみることです。

例えばtwenty twelveでpage.phpを見ると

get_template_part( 'content', 'page' );

でcontent-page.phpが呼び出され、その中で固定ページの表示に関するコードがあります。

<h1 class="entry-title"><?php the_title(); ?></h1>

のthe_title();で固定ページのタイトルが表示されているわけですね。

PHPのif文とこの関数を覚えるだけでもできることがかなり広がります。また何かあればご質問下さい。(答えられればいいのですが(笑))

スポンサーリンク

コメントをどうぞ

  1. すみません、返信が遅くなってしまいました。
    ご親切にありがとうございます。
    時間はありますのでお勧めしていただきました
    PHPのカスタマイズやテンプレート階層について勉強してみたいと思います。
    プラグインの記事の方も参考にさせていただきます。
    またお知恵をお借りすることもあるかもしれませんが
    その際は宜しくお願いいたします。
    ありがとうございました。

    1. >nuimoさん
      いえいえ、ご参考になれば幸いです。
      一つのテーマをとことん勉強すると、他のテーマを使う時も役に立ちますよ。
      カスタマイズ方法の手がかりを追記しておきました。参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。