新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

ワードプレス(WordPress)、トップページとは別の場所で記事一覧を表示させる方法 #wp

      2014/11/09

  • このエントリーをはてなブックマークに追加

1年以上前の記事です。内容が古い可能性があります。

ワードプレス(WordPress)といえばブログ。元々ワードプレスはブログ用CMSでしたね。
それが固定ページ等の機能を搭載し、一般サイトでも使用できるようになりました。
つまり、ワードプレスを使っていてブログの機能を使わないのははっきり言って損してると言う事になります。

ただ、通常のブログの場合トップページに記事一覧を表示させるのですが、「プロットファクトリー」(や「つぶくま」)ではトップページはカスタマイズして通常のWebサイトとして利用してしまっています。
そんな時にトップページとは別の場所に記事一覧を表示させる方法です。
ちなみに今回だけ「プロットファクリー」ではなくたまたま作業が重なった「つぶくま」で解説します。

■ 埼玉県熊谷市のtwitter(ツイッター)ポータル 【つぶくま】

スポンサーリンク
 

「固定ページ」に直接PHPを書きこむことはできないので、予め記事一覧を表示させるプログラムが書かれたテーマテンプレートを用意して、それを固定ページのテンプレートにするいう考えです。
用意するのはテンプレートと固定ページになります。

といったところでまずはテンプレートを用意しましょう。

テンプレートファイルの作り方

  1. ワードプレスの場合、通常、トップページには最新記事一覧が表示されます。
    従ってベースになるのは改造前の「twentyten」の「index.php」。
    これをコピーし「blog.php」とでも名前を変えてテーマフォルダの該当のテーマ(今回は「tubukuma」)内にアップロードします。
    トップ以外で記事一覧01
  2. ダッシュボードにアクセスし「blog.php」をつぶくまのレイアウトに併せて編集します。
    なお、固定ページで選択することのできるテンプレートにするには「blog.php」の記述をちょっと変えなければいけません。
    トップ以外で記事一覧02
    テンプレートPHPのヘッダー部分にコメント内に「Template Name: テンプレート名」といった記述をしてあげます。
これでひとまずテンプレートファイルはできました。

次に、固定ページを用意します。URLは「blog.html」とでもしておきましょう。

固定ページにテンプレートを適応させる

  1. 固定ページを新規で作成し、URLを指定、内容は何も書かずに右下「テンプレート」を作成したテンプレート(今回は「ブログテンプレート」)にします。
    トップ以外で記事一覧03

以上。
これで、記事一覧が表示されると思っていました。

が、なぜか、今、まさに閲覧しているこの「固定ページ」が一覧として表示されているだけ。
トップ以外で記事一覧失敗例

実はこれは「blog.php」から呼び出され、記事一覧を書き出しすのに使われる「page.php」の仕様上の問題。
「page.php」は「固定ページ」内で呼び出しされた場合、その「固定ページ」を一覧化させるようにできています。
そこで、「page.php」を呼び出す前に、「参照元をブログの記事に変えてくれ」といったようなプログラムを書いてあげなければならりません。

それが「query_posts()」関数。
「query_posts()」をつかうことで呼び出すデータを選択させることができるようになります。
で、今回はその表記が「<?php query_posts( ‘post’ ); ?>」となり、
これを「page.php」を呼び出す前に書いておけば解決です。
トップ以外で記事一覧解決策

こんな感じ。
トップ以外で記事一覧成功例

最後に作ったテンプレートファイル「blog.php」を紹介して終わりにします。 

<?php
/**
* Template Name: ブログテンプレート
*/
get_header(); ?>

※中略(HTML表記)

<?php query_posts( ‘post’ ); ?>

<?php
/* Run the loop to output the posts.
* If you want to overload this in a child theme then include a file
* called loop-index.php and that will be used instead.
*/
get_template_part( ‘loop’, ‘index’ );
?>

※中略(HTML表記)

<?php get_sidebar(); ?>
<?php get_footer(); ?>

こちらもご覧ください。(追記)
□ WordPress(ワードプレス)でトップページ以外にブログトップを設置する方法【完全版】

 - CMS, WordPress, プログラミング, 覚え書き , ,

アドセンス広告メイン

Comment

  1. あるぱか より:

    はじめまして。
    あるぱかと申します。
    ワードプレスを使用している者です。
    投稿記事を表示させる設定が分からず困っています。
    現在使用中のテンプレートは、最初から固定ページがトップページに表示されているタイプで、ブログではなくホームページという作りになっています。
    そのため、投稿記事を表示させる設定をどのようにしたら良いかわからず困っています。
    記事を読ませていただき、その通りに設定ようとしてもできませんでした。
    どこに問合せをしたら良いか分からず困っております。
    ご迷惑かと存じますが、アドバイスをいただければ幸いです。
    よろしくお願い致します。

  2. akidas より:

    とてもわかりやすい説明で私でもできました
    理由もわかったしやり方も読みやくす書いてくださっていて、ほんとに助かりました
    ありがとうございます

Message

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

  関連記事

Flickr(フリッカー)とFacebook(フェイスブック)の連携を復活させる方法

1年以上前の記事です。内容が古い可能性があります。Flickr(フリッカー)とF …

「ニンテンドー3DS」持ち運び時はゲームカード(カートリッジ)の飛び出しに注意!

1年以上前の記事です。内容が古い可能性があります。ニンテンドー3DSは持ってない …

AS2.0以前との違い(ActionScript3.0勉強中! #1)

1年以上前の記事です。内容が古い可能性があります。Flash CS3以上で使うA …

「Xperia AX」に機種変したのでモバイルSuicaで定期券を買ってみた(Suica購入編)

1年以上前の記事です。内容が古い可能性があります。モバイルSuica入会編の続き …

知らぬ間にPHPがバージョンアップ。PHP5.6からいきなりPHP7になっていた

1年以上前の記事です。内容が古い可能性があります。これ? いつからだったんでしょ …

外部JavaScriptはひとまとめにしてしまおう

1年以上前の記事です。内容が古い可能性があります。プロット・ファクトリーCMS化 …

背景(バックグラウンド)のイメージをモニター(ウインドウ)のサイズによって変える(レスポンシブルデザイン)Webサイトの作り方【CSS3コーディング】

1年以上前の記事です。内容が古い可能性があります。今、作っている某総合福祉センタ …

各種ECサイト(ショッピングサイト)料金比較一覧<改訂版>

1年以上前の記事です。内容が古い可能性があります。以前、ネタにした「各種ECサイ …

ブログやサイトにカレンダーを簡単に置く方法

1年以上前の記事です。内容が古い可能性があります。お客さんに自分で編集できるカレ …

今年はモテたい。女子が引く小さい男だと思われる9つの言動

1年以上前の記事です。内容が古い可能性があります。自分も最近良くかみさんに指摘さ …

血液型オヤジ