【 WordPress 】 page.phpを使い回して効率化！！ 投資家のFIREへの旅路 第317回
WordPressの、固定ページのテンプレートファイルである「page.php」を
WordPressのテンプレートタグを使って、簡単コーディングしました。
めんどくさがることは大切ですね！！
【 作りたいページ 】
今回作りたいのは、「制作実績」のページと、その詳細ページです。
〈 制作実績一覧ページ 〉
このように、一覧で表示されるようにしたいと思います。
そして、実績が追加されるごとに、htmlを追記するのがめんどくさいので、
ここに表示される一覧は、「固定ページ」で作成して、その固定ページのIDを指定したものが一覧で表示されるようにします。
〈 実績詳細ページ 〉
「固定ページ」で作る詳細ページです。
こちらには、固定ページのタイトルと、アイキャッチ画像を表示して、
コンテンツの内容としては、リンクを貼っているだけです。
一つ一つのファイルのhtmlを書くのがめんどくさいので、
WordPressのテンプレートタグを使って、一つのpage.phpで、今後追加されていく新しい実績の詳細ページも含めて、同じように表示されるようにします。
【 固定ページの作成 】
まずは、固定ページを作ります。
固定ページ
新規追加
固定ページを編集
と進みますが、私は、プラグインでクラシックエディターを入れていますので、最新のエディターと見た目が違うと思います。
正直こちらの方がわかりやすいです！
固定ページの中身は、
タイトル ＝ 和夢兎
本文（コンテンツ） ＝ リンクを設定(URL)
アイキャッチ画像を設定。
これのみ！です。
次はこの固定ページを一覧で表示させる
【 WP Show Posts 】
プラグインのWP Show Postsを使います。
その名の通り、Posts（投稿）を、Show（見せる）してくれます。
プラグインをインストールして有効にしましょう。
・投稿リスト作成
「投稿リスト」を新規作成します。
今回の場合は、「制作実績」という投稿リストを作成しました。
・投稿リストの詳細設定
続いて、「制作実績」投稿リストの詳細を設定します。
今回は、「固定ページ」を一覧表示させたいので、
投稿タイプ→pageを選択します。
postを選択すると、「固定ページ」ではなく、「投稿ページ」を表示するという設定になります。
ブログ一覧などを表示させたい場合は、こちらを選択しましょう。
・投稿リストの抜粋設定
この設定では、固定ページのコンテンツ部分を、抜粋して表示する時に、何文字表示するかを設定できます。
今回の固定ページは、リンクを書いているだけなので、その文字数分以上あればOKなので、80文字に設定しました。
これで「一覧ページ」に固定ページのコンテンツとして、リンクのURLを表示させます。
・投稿IDの設定
「固定ページ」には、aboutページやcontactページなど様々な任意のページが存在してくるので、その固定ページの中から、制作実績の固定ページのみを一覧表示させた訳です。
その時に、固定ページの見分ける手段として「ID」があります。
一覧に表示させたいページのIDを、入力しましょう。
「 , 」で区切って数字を入れるだけです。
さて、このIDはどこに書いてるんだという話ですが、それはここ！
・固定ページのIDの確認方法
こちらGoogle ChromeのUIですが、URLが表示されるところです。
固定ページの編集画面に行くと、
大体このようなURLになっていて、（作業はローカル環境ですので、その辺りの表示が違うと思います）
「post=94」という表示があります。
この数字が投稿IDです！
表示したい固定ページのIDをこのように確認しましょう。
・Wp Show Posts を設定する
投稿リストの編集ページの右下あたりに、このような項目があります。
ショートコード
関数
と、ありますが、ショートコードの場合は、
投稿ページの編集画面や、固定ページの編集画面から、その本文に、このショートコードを貼り付けて使うイメージです。
その貼り付けた箇所に、投稿リストが表示されます。
今回の解説では、
関数の方を使います！
関数のところをコピーするとこのようなコードが出てきます、
<?php if (function_exists('wpsp_display')) wpsp_display(92); ?>コードエディターで、このコードを表示したい箇所いに貼り付けるだけです！
今回は、このような、制作実績の一覧ページを作ります。
このページのコードがこちらです。
<!--get header--------------------------------------------->
<?php get_header(); ?>
<!--page-blog wrapper--------------------------------------------->
<div class="page-works-wrapper">
<h1>制作実績</h1>
<div class="page-works-container">
<!--パンクズリスト--------------------------------------------->
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
<section class="page-works-container-inner-website">
<h1>ホームページ・Web</h1>
<!--固定ページ一一覧表示--------------------------------------------->
<?php if (function_exists('wpsp_display')) wpsp_display(92); ?>
</section>
<section class="page-works-container-inner-dtp">
<h1>DTP</h1>
</section>
</div>
</div>
<?php get_footer(); ?><?php if (function_exists('wpsp_display')) wpsp_display(92); ?>
このコードが、真ん中下あたりにあります。
このように、コード貼り付けるだけで、一覧が簡単に作れます、
細かい、設定は、CSSで行う必要があります。
一応CSSも載せておきますが、これは結構無理やり感あるので、参考までに！
.page-works-wrapper {
width: 100%;
max-width: 1120px;
margin: 0 auto;
overflow: hidden;
h1 {
width: 100%;
text-align: center;
padding-top: 2%;
letter-spacing: 4px;
@include textSizeMid;
}
.page-works-container {
margin: 0 auto;
width: 100%;
#breadcrumbs {
width: 90%;
margin: 0 auto;
max-width: 1120px;
a {
color: $textColor1;
text-decoration: none;
}
}
.page-works-container-inner-website {
width: 90%;
margin: 6% auto;
position: relative;
h1 {
width: 100%;
text-align: left;
color: $textColor;
padding-bottom: 2%;
}
#wpsp-92 {
width: 98%;
margin: 0 auto;
.wp-show-posts-single {
width: 30%;
box-shadow: 6px 6px 10px black;
margin-left: 2%;
margin-bottom: 8%;
background-color: white;
.wp-show-posts-inner {
margin-left: 5%;
.wp-show-posts-image {
img {
width: 80%;
object-fit: contain;
}
}
.wp-show-posts-entry-header {
h2.wp-show-posts-entry-title {
@include textSizeSmall;
text-align: center;
a {
color: $textColor;
}
}
}
}
}
}
}
}
}
【 テンプレートファイル 】
ここで、おさらいです。
WordPressには、各ページに対応したテンプレートファイルというものがあります。
今回作っている「固定ページ」は、
固定ページを作っただけでは、表示されません。ここがわかりにくいところです！
さっき作ったやん！！ってなるんですよね。
WordPressは、WordPress内で編集しているのは「固定ページ」情報です。
その情報をどのように表示するのかを、設定するのが、
「page.php」というファイルです。
というか、
「固定ページ」を表示するという命令が出たら、WordPressは、「page.php」という名前のファイルを探します。これが見つからないと、白い画面になります。
トップページの場合は、「front-page.php」
投稿ページの場合は、「single.php」
任意の固定ページの場合は、「page-任意の名前.php」
という風に、表示しようとするファイルのphpファイル名はルールで決まっています。
【 page.php 】
固定ページのレイアウトと定義するテンプレートファイルは、
page.phpになります。
この名前のファイルを作って、WordPressが見つけれるようにするイメージですね。
このページは、このpage.phpで作られています。
<!--get header--ヘッダーを表示する------------------------------------------->
<?php get_header(); ?>
<!--page-wrapper--------------------------------------------->
<div class="page-wrapper">
<!--固定ページのタイトル取得--------------------------------------------->
<h1><?php the_title(); ?></h1>
<!--.content--------------------------------------------->
<div class="content">
<!--アイキャッチ画像を表示--------------------------------------------->
<!--ページのIDを取得--------------------------------------------->
<?php echo get_the_post_thumbnail(get_the_ID()); ?>
<!--コンテンツを表示する--------------------------------------------->
<?php the_content(); ?>
</div>
</div>
<!--get footer---フッターを表示する------------------------------------------>
<?php get_footer(); ?><?php get_header(); ?>
ヘッダー表示させます。
<h1> <?php the_title(); ?> </h1>
固定ページのタイトルを表示します。
<h1>タグをつけているのは、CSSで編集するためです。
<?php echo get_the_post_thumbnail(get_the_ID()); ?>
このコードは２つの動きをします。
echo get_the_post_thumbnail で、固定ページで設定しているアイキャッチ画像を表示します。
get_the_ID() で、固定ページのIDを取得します。
このIDとは、固定ページのIDです。WP Show Postsのところで確認したこれです。
<?php echo get_the_post_thumbnail(10); ?>
という感じで、ID番号を直接書いても動きますが、そうすると、全ての固定ページで、固定ページID10のアイキャッチ画像は表示されてしまうので、
<?php echo get_the_post_thumbnail( ○○ ); ?>
この○○の部分を、今表示している固定ページのIDを自動で入れてほしいわけです。
なので、get_the_ID() という命令を書くことで、IDをgetしてきてくれるのです！！
これで、一つ一つの制作実績の詳細ページのコードを書く必要がなくなります。
phpはこのように使いまわせるコードなのです！
【 まとめ 】
今回ご紹介した方法は、
WordPressとphpならではの、簡単コーディングです。
１つのファイルで、その後増えるであろうページのレイアウトも管理できる！
こんな便利なことはありません。
今回の方法を様々なに応用して、
めんどくさいことをしない＝効率の良いサイト制作を進めましょう！
この記事が気に入ったらサポートをしてみませんか？