普通のサイトやブログだと記事についているリンクをクリックすることで詳細ページに飛べたりしますが、自作テーマの場合は初期状態では記事をクリックしても詳細を見ることはできません。
今回はWordPressの投稿ページから記事を投稿し、見ることができるように設定します
こちらを「ダッシュボード」の「投稿」から編集できるようにすることで楽にメンテナンスや更新ができる様になります
また今回はループを使いますのでまだの方はぜひこちらを↓
1.トップページの作成をする
ちょっと長いですがこちらが編集する元のコードです。
<div id="content">
<section>
<h2 class="title"><span>当社のビジネスを紹介します</span></h2>
<ul class="post">
<li>
<img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"><h3><a href="subpage.html">オフィス移転</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
</li>
<li>
<img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch2.jpg"><h3><a href="subpage.html">会員数10万人突破記念</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
</li>
<li>
<img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch3.jpg"><h3><a href="subpage.html">ecoキャンペーン</a></h3><p>最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
</li>
<li>
<img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch4.jpg"><h3><a href="subpage.html">新講座を開講しました</a></h3><p>新講座を開講しましたホームページサンプル株式会社では最新を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p>
</li>
</ul>
</section>
</div>
これを適宜編集しながら、ループを使って表示させるというのがポイントです。
手順としては以下のようになります。
- STEP1不要なところを削除するループさせるので同じコードの行を削っておきます。
今回の場合ですと4つもリストはいらないので3つ削ります。<div id="content"> <section> <h2 class="title"><span>当社のビジネスを紹介します</span></h2> <ul class="post"> <li> <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"><h3><a href="subpage.html">オフィス移転</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p> </li> </ul> </section> </div>
ちょっとすっきりしました。
- STEP2ループさせたいところを囲う今回は記事をループするので以下のようにリストのところを囲います。
囲う範囲を間違えるとレイアウトが崩れるので気をつけましょう。<div id="content"> <section> <h2 class="title"><span>当社のビジネスを紹介します</span></h2> <ul class="post"> <?php if(have_posts()): while(have_posts()) : the_post(); ?> <li> <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"><h3><a href="subpage.html">オフィス移転</a></h3><p>ホームページサンプル株式会社では最新技術と自然との調和を目指します。ホームページサンプル株式会社では最新技術と自然との調和を目指します。革新的な技術で世の中を革新的な技術で世の中を世の中を動かす企業を目指しま …</p> </li> <?php endwhile; ?> <?php else : ?> <p>記事がありません</p> <?php endif; ?> </ul> </section> </div>
- STEP3テンプレートタグを埋め込むテンプレートタグを埋め込んで投稿の情報を読み込みます。
テンプレートタグについてはこちら↓- タイトルのところへ
<?php the_title()?>
- リンクのところへ
<?php the_permalink(); ?>
- 抜粋のところへ
<?php the_excerpt(); ?>
それぞれ埋め込みます。
これを反映してみるとデフォルトで最初から入っているサンプルのタイトルと内容の抜粋が取得されます。
また他にも日付を表示したり、タグやカテゴリーを表示するテンプレートタグも必要に応じて埋め込みます。<?php the_date(); ?> <!-- 投稿日時の表示 -->
<?php the_category(); ?> <!-- カテゴリーの表示-->
<?php the_tags(); ?> <!-- タグの表示-->
ここまでのコードはこのようになっています。また、見にくかったので改行を入れました。
<div id="content"> <section> <h2 class="title"><span>当社のビジネスを紹介します</span></h2> <ul class="post"> <?php if(have_posts()): while(have_posts()) : the_post(); ?> <li> <img src="<?php echo get_template_directory_uri(); ?>/images/banners/eyecatch1.jpg"> <h3> <a href="<?php the_permalink(); ?>"> <?php the_title()?> </a> </h3> <p><?php the_excerpt(); ?></p> </li> <?php endwhile; ?> <?php else : ?> <p>記事がありません</p> <?php endif; ?> </ul> </section> </div>
- タイトルのところへ
トップページはこれで完成です。
2.記事を新規追加する
これだけだと変化がわからないので「ダッシュボード」→「投稿」→「新規追加」で記事をいくつか投稿してみます。
適当に「テスト」というタイトルとサンプルテキストを入れて、3つサンプル記事を作りました。
サイトを表示してみると…
サムネイルが変わっていないので違和感がありますが、それぞれの記事がループして反映されるようになりました!
3.記事単体ページ(single.php)を作る
見た目はできましたがまだタイトルをクリックしてもページは移らないので、次はリンク先である記事単体のページを作ります。
single.phpというものを作ることで記事へのリンクを作ることができます。
- STEP1single.phpを作成するsingle.phpというファイル名で新規作成します。
- STEP2index.phpをsingle.phpにコピーする今回は構成が似ているのでindex.phpの内容をそのまま全選択してsingle.phpへコピーします。
もしレイアウトを別にご用意している場合はこの過程は飛ばしてください。サムネイルが変わってないのでアレですが、これで記事のタイトルをクリックするとその記事ページに飛ぶことができるようになりました。
- STEP3single.phpのコードに修正を加える。
今回の例で変更したのは以下の通りです。- the_excerpt();からthe_content();にする
<?php the_content(); ?>
こちらに変える事で記事の内容を表示させることができます。
- 使わないタグなどを取り除く
ここは好みにもよりますが今回は- アイキャッチ画像を外す
- タイトルのリンクを消す
- タイトルの場所を変更する
これで簡単ではありますがブログのようになりました。
またブログっぽくするために記事の文量を増やしました。 - the_excerpt();からthe_content();にする
とてもシンプルですが完成しました!
ここにページャーという「次の記事へ」のようなリンクを付けたり、コメント用の欄を付けたりなどカスタマイズしていきます
ちなみにダッシュボードの「設定」→「表示設定」で1ページに表示する最大投稿数の数を変えることでトップページに表示される投稿の数を変えることができます。
コメント