【WordPress】オリジナルテーマの下層ページを作り込もう!
WordPressのトップページの作成はできた♪
この調子で下層ページも作っていきたいから、何をどうすれば良いか教えて〜!
オリジナルテーマでトップページを作り終わったら、「投稿ページ」や「固定ページ」、「カテゴリーページ」なども作ってさらにサイトを充実させたいですよね♪
この記事では、WordPressでの下層ページの作り方をそれぞれ解説します。
具体的には、ブログページの表示を整えたり、「会社概要」などの独立したページの作成、投稿をカテゴリー別に分けて表示させるなど、WordPressでよく使われるページ・機能を実装していきます。
読み終わる頃には、下層ページの骨組みは完成しますよ♪
やぁみんな!
現役エンジニアの僕がWordPressの下層ページについて解説していくぜ!
下層ページもそこまで難しいものではないから、サクサク作り込んでいこうね◎
【WordPressのトップページ作成について知りたい方はこちら】
⇒【初心者向け】WordPressテーマの自作方法を徹底解説!
ここは抑えておこう!下層ページの共通設定とテンプレートについて
ここでは、下層ページを作る上で事前に覚えておきたいポイントを解説します。
具体的には「共通部分の読み込み」「テンプレートファイル」「テンプレート階層」についてです。
難しい内容ではないから安心して欲しいんだけど、ここを知っておかないとWordPressの理解が深まらないから、サクッと読んでみてくれ♪
下層ページでは共通部分(パーツテンプレート)を読み込むのが基本
下層ページを作成する際は、毎回header.phpとfooter.phpといった共通部分である「パーツテンプレート」を読み込むのが基本です(共通のheader、footerを配置しないページは必要ありません)。
ページごとにheaderやfooter、sidebarを毎回用意するのは面倒です。
修正が発生した際もページテンプレート1つを修正すればいいだけなので、楽ですよね。
なので、下層ページを作成する際は、毎回所定の場所でパーツテンプレートを読み込みましょう!
読み込み方法は簡単で、任意の場所に以下を記載するだけです♪
【header.phpの読み込み方法】
<?php get_header(); ?>
【footer.phpの読み込み方法】
<?php get_footer(); ?>
【sidebar.phpの読み込み方法】
<?php get_sidebar(); ?>
共通パーツ作ったね!
完全に忘れてたよ(笑)
これを「パーツテンプレート」っていうんだ。
パーツテンプレートを作っておくと、1箇所の修正で全ページに反映することができるから便利なんだよ♪
ページ数が増えても安心だね◎
「get_header(); 」みたいな「テンプレートタグ」を使うことで、「header.php」「footer.php」「sidebar.php」ファイルの中身を下層ページにも表示できるってことを覚えておこう!
これから複数のPHPファイルを作成するけど、毎回header.phpとfooter.phpの読み込みは忘れないようにね。
これからいくつもPHPファイルを作成するって聞いただけでめまいがしたわ。
WordPressではテンプレートファイルで下層ページを作成する
WordPressでは、「テンプレートファイル」というWordPress側が指定しているファイル名を使って、下層ページを作成していきます。
なぜテンプレートファイルを使うかというと、アクセスされたページに合わせたファイルを自動で表示してくれるプログラムが組まれているためです。
例えば、管理画面の「投稿」で作られたページは「single.php」、固定ページは「page.php」、カテゴリー別投稿一覧ページは「category.php」などのテンプレートファイルが表示される仕様となっています♪
これにより、プログラミングがわからない人も「if文」などで条件分岐せずに済み、簡単に「投稿」は投稿のデザイン、「固定ページ」は固定ページのデザインと切り分けることができます◎
つまり、このテンプレートファイルを使わないとWordPressの超便利機能が使えないのです。(WordPressを使う意味がなくなると言い換えても良いくらいですね)
テンプレートファイルの作成方法は簡単で、指定されたファイル名でファイルを作成するだけでOKですよ♪
ただ、名前を間違えるとテンプレートファイルにならないので注意しましょう!
「サービス詳細ページはservice.phpにすればいいんでしょ?」と思うかもしれませんが、そうではありません。
WordPressの場合は「page-service.php」などとする必要があるのです。
なので、WordPressのテンプレートファイルにはどんなものがあるのか知っておくことが大切と言えます♪
以下に良く使うテンプレートファイルの一覧を用意したので、「このページの時はどのテンプレートファイルになるのかな?」と、事前にあたりをつけてみてくださいね!
ページの種類 | テンプレートファイル名 |
---|---|
トップページ |
front-page.php |
投稿ページ |
single.php |
固定ページ |
page.php |
カテゴリーアーカイブページ |
category.php |
タグアーカイブページ |
tag.php |
404エラーページ | 404.php |
検索結果ページ | search.php |
※「アーカイブ」とは「一覧ページ」のことです。
ファイル名にもルールがあるんだね。。。
早速よくわからなくて、ゲンナリだよ。
慣れれば簡単だから安心してよ(笑)
ちなみに「$slug」というのはカテゴリーなどでつける「スラッグ名」で、「$id」はWordPressが自動でつける識別番号のことね。
内容によって変わるものは「$〇〇」って表示されるよ♪
1つ気になったのはさ、「投稿ページ」にテンプレートファイルが3つあるみたいに、複数あるテンプレートファイルにはどんな意味があるの?
私みたいなド素人子羊どもを迷わせるため?
そんな悪い理由はないよ(笑)
実は同じ種類に複数のテンプレートファイルがあるのには、「表示の優先順位」をつけるためなんだ!
例えば、投稿記事の中でも「このページだけサイドバーなしの1カラムにしたい」みたいなことはあり得そうでしょ?
そんな時に、表示の優先順位の高いテンプレートファイルで作成して分岐しておけば、投稿ページの中でもデザインや機能を切り分けられる。
同じ「投稿」でも「WEBデザイン系は2カラム」、「WEBプログラミング系は1カラム」みたいにできるってこと?
「固定ページ」でも「サービス一覧ページは赤を基調としたデザイン」「会社概要ページは青を基調としたデザイン」にできそうだね!
超便利じゃん!
そうゆうこと!
そしてテンプレートファイルの表示には優先順位があって、それが「テンプレート階層」と言われるものなのよ。
大切なポイントだから、しっかり解説していくぜ!
テンプレート階層を理解しているかでWordPressのレベルが大きく変わってくるよ。
テンプレート階層の概念を大まかに理解しよう!
テンプレート階層とは一言で説明すると「ページを表示させる優先順位のルール」のこと。
例えば、投稿ページで使われるsingle.phpというテンプレートファイルとsingular.phpというテンプレートファイルの場合、以下のような優先順位となります。
single.php > singular.php > index.php |
single.phpの方がsingular.phpよりも優先順位が高いというルールがあるため、もし投稿ページを表示させる場合、まずは「single.phpがあるか?」を自動で判定するプログラムになっています。
テーマの中に「single.php」があればsingle.phpが表示され、なければ「singular.php」、それもなければ「index.php」が表示されるというルールとなっています。
なぜ大切かというと、「テンプレート階層」の概念(ルール)を理解していないと「ページごとにデザインを切り分けられない」、「意図したページを表示できない」ということが起こるからです。
極端な例ですが、「投稿ページ(single.php)は基本2カラムだけど、この投稿ページだけ1カラムにしたい」という時に、single.phpよりも優先順位が低い「singular.php」に1カラムレイアウトを実装しても、ルール的に表示されるのは2カラムのsingle.phpとなってしまいます。
このように、テンプレート階層のルールを理解していないと思い通りにWEBサイトの構成を実現できないのです。
ほーん…表示順のルールってのがテンプレート階層なんだね。
テンプレート階層ってどうやって勉強すればいいの?
「WordPress Codex」っていうWordPressの公式サイトにある「概観図」の画像に、表示されるページの優先順位が載っているから、それを見れば直感的に理解できると思うよ♪
▼こんなやつ。
【テンプレート階層の概観図】
出典:WordPress Codexのテンプレート階層の概観図
うげっ!気持ちわるっ!
どうやって見ればいいの?
黒枠は「ページの種類」、黒枠以外がページを表していて、左にあるほど優先順位が高いファイルって考えて貰えばOKだ!
基本的には「プライマリーテンプレート」っていう、概観図でいう濃い青(single.php、page.php、index.phpなど)のテンプレートファイルを作成していくんだけど、デザイン変更などをしたい場合はこれより優先順位が高いものを使うんだ。
例えば、「投稿ページ全体」は「single.php」(プライマリーテンプレート)に書いて、レイアウトなどを分岐したい投稿ページは「single-post.php」(セカンダリーテンプレート)にコードを書くみたいな感じだね!
これは覚えなくていいからね!優先順位があるってことを知っておけば大丈夫!
左に行けば行くほど優先度が高いって考えればいいのか◎
思ったより視覚的でわかりやすいかも♪
その通りだよ!
ちなみに、single.phpとかpage.phpみたいな下層ページ用のファイルをテーマの中に作成していなければ、全部「index.php」が表示される仕様になっているってのもポイントだ!
ほ〜ん…「優先順位の高いファイルがあるかチェック」→「なければ次に優先順位が高いものをチェック」って流れになってるんだね。
何もなければindex.phpが表示…だから「index.php」は最低限必要なファイルって言ってたのか!
ナイス理解力だ!!
キャバコにとっての「index.php」は僕だよね?
まじでキモい。
そろそろ下層ページの作り方を教えてよ♪
オッケー!
ここからは下層ページを1つずつ作っていこう!
投稿詳細ページを作成しよう!
まずは「投稿詳細ページ」を作成しましょう!
WordPress管理画面 > 投稿一覧で、「表示」をクリックした際に出てくるページが投稿詳細ページです。
今あなたが見ているこのページも「投稿詳細ページ」です。
「投稿」で作成したブログ記事などを掲載する場合が多いですね♪
single.phpを用意しよう
まずは投稿ページ用のテンプレートファイルである「single.php」というファイルを作成し、以下をコピーして貼り付けましょう。
「single.php」を作成する場所は、「index.php」と同じ階層です。
<?php get_header(); ?>
<main class="main single">
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="wysiwyg-editor">
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
これで、管理画面(投稿画面)で入力した内容が、表側に表示されるようになります。
え、これだけでいいの?
投稿詳細ページはこれだけで完成(笑)
これで管理画面の「投稿」で作成したページが表示されるよ♪
ほぇ〜。簡単すぎて拍子抜けだから少し質問させて。
.mainに.singleってclassを追加したのはなんで?
これは投稿ページでデザインを切り分けるためだね!
CSSで
.main.single {
/* CSSを記述 */
}
と記述すれば、投稿ページにだけデザインが反映されるから、他のページに影響を与えずにCSSを記述できるよね♪
固定ページとかでも.pageみたいなclassをつけていくのがおすすめだぜ!
なるへそ〜。
.wysiwyg-editorは?
これは投稿の本文ということがわかる名前(wysiwyg-editor)にしているんだ。
wysiwygっていうのは「What You See Is What You Get」の頭文字をとったもので、実際に表示される画面を編集中の画面に表示してくれるエディタのことさ。(WordPressでいう「ビジュアルエディタ」)
以下画像のように、WordPressの管理画面から投稿を作成するときの画面のことなんだけど、エディタの段階で見出しの装飾や画像が反映されてるよね♪
これをwysiwygエディターというのよ。
「ここからはwysiwygエディタで記述した本文だよ〜」というのがわかるように「.wysiwyg-editor」にしているぜ。
名前は任意だから、わかりやすいものにしよう!
なんだ、知らない言葉を使ってカッコつけてるのかと思ったよ!
別にカッコよくないけど。
次の<?php the_content(); ?>で、投稿で書いた本文を表示するようにプログラムしているってことだけ知っておこう!
ただ今のところCSSを設定していないから、レイアウトはグチャグチャだよね。
そこで次のステップだ!
投稿情報を以下のように入力してみよう
管理画面(投稿画面)で、以下のように文字を入力してみてください。
※かっこの文字は不要です。見出しなどが入っていれば、文字は何でもOKです。
見出し(h2など)を設定する場合は、見出しを適用したい文字をクリックし、以下の①クリック→②クリックで見出し化できます▼
その後、再度見出し化した文字をクリックし、以下でいう「H2」の部分をクリックすると、H3やH4など、見出しのレベルを変えることができます▼
さて、情報を入力した状態で、投稿を表示してみましょう。
すると…
上記のようにレイアウトが整っていない状態になるかと思います。
これを以下のように整形したいので、CSSの出番です。
以下にテンプレを用意したぜ!
手っ取り早く上記の状態を確認したい場合は、コピペしてOKだ!
貼り付け先は「style.css」でもいいし、君が用意した下層ページ用のcssでもいいよ♪
.main.single{
background: white;
border-radius: 2px;
margin: 20px auto;
max-width: 940px;
padding:30px;
}
.main.single h1{
font-weight: bold;
font-size:32px;
margin:0;
}
.main.single .wysiwyg-editor h2{
font-weight: bold;
font-size:25px;
margin:50px 0 0 0;
padding:10px;
background:#6cc6c4;
color:white;
}
.main.single .wysiwyg-editor h3{
font-size:22px;
margin:40px 0 0 0;
padding:0 0 10px 0;
border-bottom:2px solid #6cc6c4;
}
.main.single .wysiwyg-editor h4{
font-size:18px;
margin:40px 0 0 0;
}
.main.single .wysiwyg-editor h4:before{
content:"■";
color:#6cc6c4;
}
.main.single .wysiwyg-editor h2:first-child,
.main.single .wysiwyg-editor h2 + h3,
.main.single .wysiwyg-editor h3 + h4{
margin-top:25px;
}
.main.single .wysiwyg-editor p,
.main.single .wysiwyg-editor ul,
.main.single .wysiwyg-editor ol,
.main.single .wysiwyg-editor table{
margin:25px 0 0 0;
font-size:16px;
line-height:1.7;
}
.main.single .wysiwyg-editor ul,
.main.single .wysiwyg-editor ol{
margin-left:20px;
}
.main.single .wysiwyg-editor ul{
list-style-type: disc;
}
.main.single .wysiwyg-editor ol{
list-style-type: decimal;
}
.main.single .wysiwyg-editor table{
border-collapse: collapse;
}
.main.single .wysiwyg-editor table th,
.main.single .wysiwyg-editor table td{
border:1px solid #ddd;
padding:10px;
}
.main.single .wysiwyg-editor .wp-block-table figcaption{
font-size:14px;
line-height:1.6;
color:#666;
margin:10px 0 0 0;
}
上記は反映したいデザインによって変わってくるから、適宜調整してみてね♪
なんか難しいことしてるのかと思ったけど、実際はCSSでデザインを整えてるだけなのか。
下層ページを作るというのは「それぞれのページに適したHTML/CSSを記述する」ってことだからね。
難しく考えなくてOKだ!
ただ、ここでの重要ポイントは「クライアントが簡単に更新できる形で実装する」ということ。
例えば、管理画面(投稿画面)で「高度なCSS」などはなるべく活用せずに完結させたいね。
え?なんでよ。超オシャレな下層ページを作りたいよ。
もちろん、デザインの都合上、特定のCSSクラスをあてたくなることも多々ある。
けどこれをアリにしてしまうと、HTML/CSSがわからないクライアントを混乱させてしまうよね。
WordPressを導入する目的は「プログラミングがわからなくてもWEBサイトの更新ができるようにする」ってところがメインだからさ。
やむを得ず使うということもあるけど、なるべくクライアントがHTML/CSSに触らなくても、記事作成・更新が完結できる形にしてあげよう!
むぅ〜…たしかにそうだね。
自分だけのサイトならいいけど、クライアントがいる場合は「クライアントが使いやすいか?」を基準に考えてあげた方が親切か。
デザインもそうだけど、自分のエゴが出ないように気をつけなきゃね♪
素晴らしい気づきだぜ!
どうしても表現したいデザインが複雑になるときは、カスタムフィールドという機能を使おう!
詳細は別の記事で触れるから今回は割愛するけど、カスタムフィールド機能を使えば、複雑なデザインにしてもクライアントが直感的に更新できるようになるぜ!
「カスタムフィールド」という言葉を頭の片隅に置いておこう!
YouTubeの埋め込みをレスポンシブ化しよう
最近は記事の中に動画を埋め込む機会も増えてきました。
しかし、YouTube動画をそのままWordPressに埋め込んでも、レスポンシブ時には画面からはみ出してしまいます。
なので、ここではYoutube埋め込みをレスポンシブ化させておきましょう◎
single.phpにYouTube動画のリンクを実装しよう!
まずは、当然ながらYouTube動画のリンクを実装する必要があります。
貼り付けたいYouTube動画のurlを取得し、任意の場所に貼り付けるまでの作業をしましょう!
まずはYouTube動画を開き、動画タイトル下の「共有」をクリックしてください。
ポップアップで表示された画面の「埋め込む」をクリックしましょう。
「埋め込む」をクリックして表示されたコードをコピーします。
最後にsingle.phpの任意の場所にコードを貼り付けましょう!
面倒な人は、動画ページのURLを貼り付けるだけでも大丈夫だよ♪
functions.phpに以下を追記しよう!
次に「functions.php」を開き、以下をコピペしましょう♪
function iframe_in_div($the_content) {
if ( is_single() ) {
$the_content = preg_replace('/<iframe/i', '<div class="youtube"><iframe', $the_content);
$the_content = preg_replace('/<\/iframe>/i', '</iframe></div>', $the_content);
}
return $the_content;
}
add_filter('the_content','iframe_in_div');
何をしたの?
YouTubeの動画を埋め込んだら、自動で「<div class=”youtube”></div>」で囲うように指定しているよ♪
このdivで囲うというところがキモなんだ!
CSSでレスポンシブ対応しよう!
次にやるのは、埋め込んだYouTube動画をCSSでレスポンシブ対応させることです。
現状、表示されるHTMLは以下のようになっています。
<div class="youtube"> <iframe></iframe> /* 中にYouTubeのURL */ </div>
なので「.youtube」と「iframe」に対してスタイルを当ててあげましょう!
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
これだけで投稿ページに埋め込んだYouTube動画はレスポンシブ対応されるのでお試しください♪
CSSのコード解説は割愛するけど、これをコピペするだけでYouTube動画がレスポンシブ対応するぜ!
めっちゃ簡単でした♪
固定ページにもレスポンシブ対応したYouTubeを埋め込みたい場合は?
functions.phpに記述した「if ( is_single() )」を「if ( is_single() || is_page() )」とすればOKだ!
「||」←これってなんだっけ?
「論理演算子」ってやつで、日本語に訳すと「または」って意味になるよ♪
「投稿ページ、または固定ページ」ってことだね。
論理演算子を忘れちゃった人は、以下の記事も読んでおこう◎
固定ページを作成しよう!
次に固定ページを作成していきましょう!
「固定ページ」とは、投稿のようにカテゴリーに含まれないページで、1ページのみで完結するページのことです。
具体的には、「会社概要」や「サービス詳細ページ」「お問い合わせページ」などはよく固定ページで作成されますね。
WEB食いでは「Web食いとは?」のページなどで使われていますよ♪
page.phpを用意しよう!
「固定ページを作成する」といっても、やることは「投稿ページの作成」とほぼ同じです。
まずは固定ページ用のテンプレートファイル「page.php」を作成してみましょう!
作成場所は、index.phpと同じ階層です。
page.phpに以下を記述しよう!
page.phpを作成したら、以下をコピペしましょう!
<?php get_header(); ?>
<main class="main page">
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<div class="wysiwyg-editor">
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
え、これってsingle.phpと全く同じ?
基本は全く同じだ!
「固定ページ」ってくくりの違いはあるんだけど、構造的には「投稿ページ」と同じようなものだからね。
これで固定ページは完成だ♪
管理画面の「固定ページ」からテキストを入力すれば確認できるよ!
ほんとだ!
基本的には投稿と同じなんだね。。。
難しく考えて損したわ!
投稿ページと同じように、CSSを適用しよう!
mainタグに「.page」なんてclass名をつけてデザインを切り分けられるようにしておくのもおすすめだ!
投稿ページと固定ページでアイキャッチ画像を設定しよう!
次に、投稿ページと固定ページでアイキャッチ画像が表示されるように実装していきましょう!
少し長くて気分が悪くなるかもしれませんが、コピペ + 微調整で大丈夫なので安心してください♪
アイキャッチ画像を設定できるようにする
まずは管理画面でアイキャッチ画像を表示できるようにします。
functions.phpに以下をコピペしよう!
functions.phpをテキストエディタで開き、以下をコピペして保存してください。
//アイキャッチ画像を有効化
add_theme_support('post-thumbnails');
これで管理画面の投稿で「アイキャッチ画像」の項目が表示されているはずです。
アイキャッチ画像を設定するときは、ここで画像を選択しましょう♪
ただ、これだけではブラウザでアイキャッチを表示できません。
なぜなら投稿ページなどでアイキャッチ画像の出力を指定していないためです。
次は「アイキャッチ画像を投稿ページや固定ページのどこに出力するか」を指定していきましょう!
アイキャッチを出力する
ここからは、single.phpとpage.phpにアイキャッチ画像を出力するためのコードを記述していきます。
h1の下に表示する場合が多いですね!
以下は投稿ページに記述する場合の例です。
<?php get_header(); ?>
<main class="main single">
<?php if ( have_posts() ) : ?>
<?php while( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<?php
/* ここからアイキャッチ設定 */
echo '<span class="image">';
if ( has_post_thumbnail( $post->ID ) ) {
echo get_the_post_thumbnail( $post->ID, 'large' );
} else {
echo '<img src="' . esc_url( get_theme_file_uri( "img/default-image.png" ) ) . '" alt="">';
}
echo '</span>';
/* ここまで */
?>
<div class="wysiwyg-editor">
<?php the_content(); ?>
</div>
<?php endwhile;?>
<?php endif; ?>
</main>
<?php get_footer(); ?>
これは何をしてるの?
簡単にいうと、
アイキャッチが設定されているか確認 → 設定されてたらそれを表示 → されてなければdefault-image.pngを表示
ってことを指示してるぜ。
ほ〜ん。
ひとつずつ教えて!
まず、<span class=”image”>は任意のタグでOKだ。
HTMLを出力しているだけだからね。
次のif文は?
「if ( has_post_thumbnail( $post->ID ) ) { 」の部分で、「この投稿はアイキャッチが設定されているか?」を確認してるよ。
アイキャッチが設定されていればifの中を通り、設定されていなければelseを通る、という具合だ。
get_the_post_thumbnail( $post->ID, ‘large’ )の「large」でサイズを指定してる。
mediumやfullなども指定できるから、用途によって以下のように変えていこうぜ!
// サムネイル (デフォルト 150px x 150px :最大値)
get_the_post_thumbnail( $post->ID, 'thumbnail' )
// 中サイズ (デフォルト 300px x 300px :最大値)
get_the_post_thumbnail( $post->ID, 'medium' )
// 大サイズ (デフォルト 640px x 640px :最大値)
get_the_post_thumbnail( $post->ID, 'large' )
// フルサイズ (アップロードした画像の元サイズ)
get_the_post_thumbnail( $post->ID, 'full' )
// 他のサイズ
get_the_post_thumbnail( $post->ID, array( 100, 100 ) )
「img/default-image.png」の部分は、アイキャッチが無い場合に表示したい画像パスを指定しよう。
当然imgフォルダにdefault-image.pngを配置した上でね。
alt属性も忘れずに指定しておこう!
よくわかってないけど、コピペしとこ〜
パンくずリストを作成しよう!
ここからは、「パンくずリスト」を実装していきましょう!
下層ページではパンくずリストを実装することが多いです。
パンくずリストとは?
パンくずリストとは、以下画像の緑枠部分のようなものです。
Webサイトを利用しているユーザーが、「今自分はどの階層にいるのか」をぱっと見で理解できる誘導表示の役割があるので、特に理由がなければ表示してあげると親切ですね。
記事の1番上か、下に表示させることが多いです。
童話の「ヘンゼルとグレーテル」で主人公が道に迷わないように、パンくずを置いていったのが名前の由来なんだよね♪
そうそう。
ユーザーが迷わず帰れるように設置するのがパンくずリストの役割だ!
パンくずはなるべく構造化データで実装しよう
パンくずリストは「構造化データ」で実装するようにしましょう!
構造化データとは、HTMLで書かれた情報が何を表しているのかを、Googleにわかりやすく伝えるための仕組みです。
例えば、先ほどの画像を見たら人間は「パンくずリストだ」と判断できますが、Googleのクローラー(サイトを巡回するロボット)は同じように判断できません。
ですが、構造化マークアップ(構造化データで書くこと)をしてあげることで、Googleも「パンくずリストだ」と判断可能になるのです。
つまりWEBサイトの情報をGoogleに正しく伝えていると言えますね!
また、検索結果画面で「リッチスニペット」として表示される可能性も出てきます。
リッチスニペットとは、以下のように検索結果で少し違った形で表示されることだと思ってもらえればOKです。
画像が表示されたり、タイトルや本文以外のテキストが表示されることで、ユーザーに視覚的に内容を伝えやすくなるというメリットがあります♪
まとめると、Googleにもユーザーにも情報を伝えやすくするものが「構造化データ」ということですね!
ではさっそく、構造化データの実装方法をご紹介します。
WordPressではどのように構造化データでパンくずを実装すればいいの?
構造化データの実装はプラグインを使うのも手ですが、わざわざプラグインを使うまでもありません。
functions.phpに追記する方法がおすすめです。
まずは生成される結果、HTMLを確認しておきましょう!
<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/" itemprop="item"><span itemprop="name">TOP</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/category/design/" itemprop="item">
<span itemprop="name">カテゴリー名</span></a>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="/design/23/" itemprop="item">
<span itemprop="name">記事タイトル</span></a>
<meta itemprop="position" content="3">
</li>
</ul>
こんな感じで表示されればOKってことね!
詳しく教えてよ♪
オーケー。
functions.phpをテキストエディタで開いておくれやす!
functions.phpに構造化データを記載しよう!
functions.phpに以下をコピペしましょう!
// パンくずリストの構造化マークアップ
function breadcrumb_func(){
global $post;
$str ='';
$url = esc_url((is_ssl() ? 'https' : 'http') . '://' . $_SERVER["HTTP_HOST"] . htmlspecialchars($_SERVER["REQUEST_URI"], ENT_QUOTES, 'UTF-8'));
if(!is_home() && !is_admin()){
$str.= '<ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
$str.= '<a href="'.home_url().'" itemprop="item"><span itemprop="name">'.'TOP'.'</span></a><meta itemprop="position" content="1"></li>';
if( is_post_type_archive() ){
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.esc_html(get_post_type_object(get_post_type())->label ).'</span></a><meta itemprop="position" content="2"></li>';
} elseif(is_tax()){
$str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_post_type_archive_link( get_post_type() ).'" itemprop="item"><span itemprop="name">'.esc_html(get_post_type_object(get_post_type())->label ).'</span></a><meta itemprop="position" content="2"></li>';
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.single_term_title( '' , false ).'</span></a><meta itemprop="position" content="3"></li>';
} elseif(is_tag()) {
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.single_tag_title( '' , false ).'</span></a><meta itemprop="position" content="2"></li>';
} elseif(is_category()) {
$cat = get_queried_object();
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'.get_cat_name($ancestor).'</span></a><meta itemprop="position" content="2"></li>';
}
}
$str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.$cat-> cat_name.'</span></a><meta itemprop="position" content="3"></li>';
} elseif(is_page()){
if($post -> post_parent != 0 ){
$ancestors = array_reverse(get_post_ancestors( $post->ID ));
foreach($ancestors as $ancestor){
$str.='<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'. get_permalink($ancestor).'" itemprop="item"><span itemprop="name">'.get_the_title($ancestor).'</span></a><meta itemprop="position" content="2"></li>';
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="3"></li>';
}
} else {
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="2" /></li>';
}
} elseif(is_single()){
$categories = is_singular('achievement') ? get_terms($post->ID) : get_the_category($post->ID);
$cat = $categories[0];
if($cat -> parent != 0){
$ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
foreach($ancestors as $ancestor){
$str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_category_link($ancestor).'" itemprop="item"><span itemprop="name">'.get_cat_name($ancestor).'</span></a><meta itemprop="position" content="2"></li>';
}
$str.= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_category_link($cat -> term_id).'" itemprop="item"><span itemprop="name">'.$categories[0]->cat_name.'</span></a><meta itemprop="position" content="3"></li>';
$str.= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="4"></li>';
} else {
$str.='<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_category_link($cat -> term_id).'" itemprop="item"><span itemprop="name">'.$cat-> cat_name.'</span></a><meta itemprop="position" content="2"></li>';
$str.= '<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="3"></li>';
}
} else {
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.get_the_title().'</span></a><meta itemprop="position" content="2"></li>';
}
$str.= '</ul>'."\n";
}
return $str;
}
コ、コ、コピ….
コピペで大丈夫だ!!
内容も特に理解しなくていいよ♪
single.phpにパンくずリストを表示するコードを書こう!
あとは任意の場所に以下コードを記述しましょう!
<?php echo breadcrumb_func(); ?>
表示に関してはこれだけでいいんだ?
これだけで実装完了だぜ!
カスタム投稿タイプのパンくずを追加するには?
カスタム投稿タイプとは、管理画面の「投稿の種類」を増やすためのものだと思ってもらって大丈夫です。
デフォルトだと「投稿」のみですが、「お知らせ」や「ブログ」などの投稿の種類を追加することができ、書きたい内容によって場所を分けることができる便利機能となっています♪
カスタム投稿タイプにパンくずリストを追加する場合は、functions.pnpに以下を追加しましょう。
} else if (is_single()) { の閉じカッコ「}」の後に記述します。
} elseif(is_single('カスタム投稿タイプで指定した名前')){
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">';
$str.= '<a href="' . get_post_type_archive_link(get_post_type()) . '"><span itemprop="name">' . esc_html(get_post_type_object(get_post_type())->label ) . '</span></a></li>';
$str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.get_the_permalink().'" itemprop="item"><span itemprop="name">'.wp_title('', false).'</span></a><meta itemprop="position" content="3"></li>';
}
これは絶対に設定するの?
カスタム投稿タイプを使わない場合は実装する必要ないぜ!
アーカイブ用のパンくずを追加するには?
アーカイブ用のパンくずリストを作成するには、以下を記述しましょう!
カスタム投稿タイプ用の下に以下を記述します。
} elseif(is_archive()) { $str.= '<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="'.$url.'" itemprop="item"><span itemprop="name">'.esc_html(get_the_archive_title()).'</span></a><meta itemprop="position" content="2"></li>'; }
get_the_archive_title()の「:カテゴリー」などの文字を削除する方法
デフォルトのままカテゴリーをパンくずリストとして表示すると、「HOME > カテゴリー:ブログ」のように、「カテゴリー:」という不要な文字が表示されます。
これは必要ないので、functions.phpに以下を追記し削除しましょう!
/* the_archive_titleで余計な文字を削除する */ add_filter( 'get_the_archive_title', function ($title) { if (is_category()) { $title = single_cat_title('',false); } elseif (is_tag()) { $title = single_tag_title('',false); } elseif (is_tax()) { $title = single_term_title('',false); } elseif (is_post_type_archive() ){ $title = post_type_archive_title('',false); } elseif (is_date()) { $title = get_the_time('Y年n月'); } elseif (is_search()) { $title = '検索結果:'.esc_html( get_search_query(false) ); } elseif (is_404()) { $title = '「404」ページが見つかりません'; } else {
} return $title; });
これを記述するだけで、不要な文字が削除されるから実装しておこうね♪
これでパンくずリストの設定は終わりかな?
これで完了だ!
次は固定ページへのリンクを実装しよう!
トップページから固定ページにリンクを貼ろう!
トップページには「VIEW MORE」といったリンクを設置して、下層ページへリンクを貼るシーンがかなり多いかと思います。
固定ページへリンクを貼る時は、スラッグを記載するのではなく、固定ページのIDを設定しておきましょう。
<a href="<?php echo esc_url(get_permalink( 63 )); ?>">View More</a>
「get_permalink()」で固定ページのURLを取得し、引数にIDを指定しています。
固定ページのIDは、以下の手順で調べられます。
- 管理画面で固定ページの一覧ページを開く
- IDを調べたい固定ページにマウスカーソルをあてる
- 画面下部にURLが表示 →「post=」の後の数字が「固定ページID」
投稿ページなどもこの手順でIDを調べられるので、覚えておくと良いでしょう♪
なんでIDで指定しなきゃダメなの?
IDはWordPress側が自動で振り分ける番号で、変わらないからだよ。
スラッグ指定でリンクしてしまうと、管理画面からスラッグを変更した時にリンク切れになっちゃうよね?
それを防ぐために、IDを指定しておく方が安全なんだ!
なるへそ〜。
そんな理由があったんだね。。。
ちゃんとIDで指定するようにする!
投稿全一覧ページを作ろう
次は投稿全一覧ページを作成しましょう!
投稿全一覧ページとは、文字通り投稿ページを一覧で表示しているページのことで、以下のようなページとなることが多いです。
WordPressのページテンプレートという機能を使って、カスタマイズした固定ページを作成していくよ!
と言われても、最初はイメージが湧かないと思うから、以下順々に実装していってくれれば大丈夫だ!
コピペで良いの?
おう!PHPだらけだから、いきなりの全理解は鬼ムズだ。
最初は、コピペでHTMLをいじってく程度に調整できればOKだよ♪
ページテンプレートのpage-xxxxx.phpというファイルを作成しよう!
ページテンプレート機能を使うには、page-xxxxx.phpというファイルを作成する必要があります。
xxxxxは任意の文字(自由)でOKなので、page-articles.phpみたいな名前にすると良いでしょう。
設置場所はpage.phpやsingle.phpと同じ位置です。
page-xxxx.phpに以下のソースをコピペしよう!
コピペするだけで、以下の書き方を覚える必要はありません。
最初から細かく理解するのは難しいので、とりあえずコピって動いたら、HTML部分をカスタマイズできればOKですよ♪
※1行目のコメントアウト(Template Name)を入れないと、ページテンプレート機能を利用できないので、注意です!
<?php /* Template Name: 新着記事全一覧 */?>
<?php get_header(); ?>
<main class="lower page-articles">
<?php the_title( '<h1 class="lower-title">', '</h1>' ); ?>
<section class="article-lists">
<?php
/**
* 記事一覧の表示
*/
$iPaged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$aPosts = new WP_Query([
'posts_per_page' => get_option('posts_per_page'), // 件数の指定
'paged' => $iPaged, // ページ番号
'orderby' => 'date', // 並び順の対象(date=投稿日時)
'order' => 'DESC', // 並び順を新しい順に
'post_type' => 'post', // 投稿データが対象(pageにすると固定ページ)
'post_status' => 'publish' // 公開されているデータが対象
]);
$iPages = $aPosts->max_num_pages;
if ( $aPosts->have_posts() ) :
while ( $aPosts->have_posts() ) : $aPosts->the_post();
// ID
$iPostId = esc_html($post->ID);
// 記事URL
$sPostUrl = get_permalink($iPostId);
// 公開日
$sPostDate = mysql2date('Y.m.d', esc_html($post->post_date));
// 抜粋・本文
$sPostContent = strip_tags($post->post_content);
$sPostExcerpt = esc_html($post->post_excerpt);
if (trim($sPostExcerpt) == '') {
// 抜粋が空だったら本文から文字を抽出
$sPostExcerpt = mb_substr($sPostContent, 0, 60) . '...';
}
echo '<div class="box">';
echo '<div class="detail">';
echo '<p class="post-date">' . esc_html($sPostDate) . '</p>';
echo '<h3 class="title"><a href="' . esc_url($sPostUrl) . '">' . esc_html($post->post_title) . '</a></h3>';
echo '<p class="excerpt">' . esc_html($sPostExcerpt) . '</p>';
echo '</div><!--/.detail-->';
echo '</div><!--/.box-->';
endwhile;
endif;
/**
* ページネーション
*/
$iRange = 4;
$iShowItems = ($iRange * 2) + 1;
// 現在のページ
global $paged;
if(empty($paged)) $paged = 1;
// ページ数
if (!$iPages){
global $wp_query;
$iPages = $wp_query->max_num_pages;
}
if(!$iPages) {
$iPages = 1;
}
if(1 != $iPages) {
echo "<div class=\"pagination\"><span>".$paged." / ".$iPages."</span>";
if($paged > 2 && $paged > $iRange+1 && $iShowItems < $iPages) echo "<a href='".get_pagenum_link(1)."'>« 最初へ</a>";
if($paged > 1 && $iShowItems < $iPages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ 前へ</a>";
for ($i=1; $i <= $iPages; $i++) {
if (1 != $iPages &&( !($i >= $paged+$iRange+1 || $i <= $paged-$iRange-1) || $iPages <= $iShowItems )) {
echo ($paged == $i)? "<span class=\"current\">".$i."</span>":"<a href='".get_pagenum_link($i)."' class=\"inactive\">".$i."</a>";
}
}
if ($paged < $iPages && $iShowItems < $iPages) echo "<a href=\"".get_pagenum_link($paged + 1)."\">次へ ›</a>";
if ($paged < $iPages-1 && $paged+$iRange-1 < $iPages && $iShowItems < $iPages) echo "<a href='".get_pagenum_link($iPages)."'>最後へ »</a>";
echo "</div>\n";
}
?>
<?php wp_reset_query(); ?>
</section>
</main>
<?php get_footer(); ?>
気持ち悪くなってきた。
(笑)
コピペで大丈夫!
一応、解説していくぜ!
まずは1行目の<?php /* Template Name: 新着記事全一覧 */ ?>
これはテンプレートの名前をつけているんだ!
管理画面→固定ページの「ページ属性」で選択できるようになるよ。
ふーん。
じゃあわかりやすい名前をつけてあげた方がいいんだね。
その通りさ!
2行目の<?php get_header(); ?>はheader.phpを読み込んでいるだけだね。
これはキャバコも覚えてる!
4~8行目あたりは君が作成しているテーマのHTMLを読み込もう!
<mainclass="lower page-articles">
<?php the_title( '<h1 class="lower-title">', '</h1>' ); ?>
<section class="article-lists">
ふんふん。
ここは表示される部分のHTMLだね。
9行以降は、投稿の全一覧を取得して表示するPHP部分だよ。
とりあえず、上記をコピペしておけば記事一覧が表示されるから、HTMLとCSSを君のテーマに合わせてカスタマイズしよう!
echo ‘<div class=”box”>;のあたりが実際に出力されるHTMLになるんだね。
ページネーションって部分は何?
ページネーションはカスタマイズ不要だぜ!
ページネーションとは、以下のようなページ分けのリンクのことを言うんだ。
投稿データがたまってくると、さすがに1ページ内に全投稿を表示するのは厳しくなるからね。
読み込みに時間がかかりすぎてしまうからページ分けをしてあげているよ♪
へぇ〜。
結構いろんなところで見かけるね。
ページネーションって言うのか。
ページネーションのソースについては、いじる必要ほぼ無しだから安心してくれ。
ほとんどの人は理解すらいらない(カスタマイズできるレベルになりたい場合は、理解できるようになりたいけど)。
僕も毎回コピペしちゃってるぜ!
それなら安心〜♪
けど、デザインは調整した方がいいんだよね?
そうゆうナイスな気づきをできるところが大好きだ!
ページネーションのデザインはCSSで対応しよう!
あれ?
「前へ」と「次へ」が表示されないんだけど…。
その場合は「$iRange = 4;」となっている数値(4)の部分を、1とか2にすれば表示させるぜ!
前後のページネーションナンバー※を除いていくつ表示させるかを設定するのが、iRangeなのだ!
※本件だと、1と3が前後のページネーションナンバーです。
最後の4行はキャバコもわかる!
普通のHTMLを出力 + footer.phpを読み込んでいるんだよね♪
おっっっっしゃる通りだぜ!愛してる!
ここも君が作成したHTMLに変えてもらってOKだよ♪
ちょこちょこキモいこと言うのやめてくれる?
カスタムフィールドの値を表示するには?
カスタムフィールドを知らない人は、飛ばしていただいて大丈夫です。
カスタムフィールドを実装する際にご参照いただければと思います。
Custom Field Suiteを使った場合は、$cfs->getを使うと出力できます。
if ( $aPosts->have_posts() ) :
while ( $aPosts->have_posts() ) : $aPosts->the_post();
echo '<p class="catch-copy">' . esc_html($cfs->get('catch-copy')) . '</p>';
endwhile;
endif;
カテゴリー情報を出力するには?
カテゴリー情報を出力するには、get_the_category()というテンプレートタグを利用します。
記載する場所は以下です。
while ( $aPosts->have_posts() ) : $aPosts->the_post();
// この間に書く
endwhite;
そして、以下のように書くと、スラッグやカテゴリー名称などを出力できます。
$aCategory = get_the_category();
$sCategorySlug = $aCategory[0]->slug;
$sCategoryName = $aCategory[0]->cat_name;
// カテゴリースラッグを出力
echo esc_html($sCategorySlug);
// カテゴリー名を出力
echo esc_html($sCategoryName);
slugやcat_nameの部分を書き換えることで、カテゴリーに関する他の情報も取得&出力が可能です。
アイキャッチを出力するには?
出力したい箇所に、以下を書きます。
echo '<span class="image">';
if ( has_post_thumbnail( $post->ID ) ) {
echo get_the_post_thumbnail( $post->ID, 'large' );
} else {
echo '<img src="' . esc_url( get_theme_file_uri( "img/default-image.png" ) ) . '" alt="">';
}
echo '</span>';
例えば「echo ‘<div class=”detail”>’; 」の下にアイキャッチを表示させたい場合は、以下のようになります。
echo '<div class="box">';
echo '<div class="detail">';
// アイキャッチここから
echo '<span class="image">';
if ( has_post_thumbnail( $post->ID ) ) {
echo get_the_post_thumbnail( $post->ID, 'large' );
} else {
echo '<img src="' . esc_url( get_theme_file_uri( "img/default-image.png" ) ) . '" alt="">';
}
echo '</span>';
// アイキャッチここまで
echo '<p class="post-date">' . esc_html($sPostDate) . '</p>';
echo '<h3 class="title"><a href="' . esc_url($sPostUrl) . '">' . esc_html($post->post_title) . '</a></h3>';
echo '<p class="excerpt">' . esc_html($sPostExcerpt) . '</p>';
echo '</div><!--/.detail-->';
echo '</div><!--/.box-->';
ページテンプレートを設定しよう!
最後に、ページテンプレートの設定をします。
WordPressの管理画面へ移動し、固定ページ → 新規追加で固定ページを作成したら、「投稿全一覧」のようなタイトルをつけましょう(任意タイトルでOKです)。
その後、以下の「ページ属性」→「テンプレート」であなたが作ったものを選択します。
※ページ属性は固定ページにしか表示されません(投稿では表示されません)
これで、page-xxxx.phpが適用される固定ページが完成しました。
ページテンプレートはよく使う機能ですので、名称を覚えておくと良いでしょう。
カテゴリーに属する記事一覧ページを作成しよう
最後に、カテゴリーに属する記事一覧ページを作成しましょう♪
WEB食いのサイトでいう「WEBデザイナー向け」とか「就職・転職者向け」みたいなカテゴリーごとに投稿をまとめてあるページのことです。
テンプレートファイルは「category.php」を使うので、index.phpと同じ階層に作成してくださいね!
category.phpを作成しよう
category.phpも、single.phpなどと同様have_posts()を使います
上記のように、投稿全一覧ページを作成するときは、ゴニョゴニョ大量のソースが必要になりますが、category.phpは比較的シンプルに書けます。
category.phpのソース例▼
<?php if(have_posts()): while(have_posts()):the_post(); ?>
<div class="box">
<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<p><?php the_category(', '); ?></p>
<p><?php the_content('続きを見る'); ?></p>
</div>
<?php endwhile; endif; ?>
これで下層ページ作成は終わり?
お疲れ様♪
これでひと通りの下層ページは作成できたよ!
もう少し作り込みたい人はカスタマイズしていく必要があるけど、基本はOKだ!
やった…やったよお母さん。
でもまだ全然理解できてないや(笑)
それで大丈夫!
WordPressサイトを何回も作ってれば、自然と理解できてくるからね!
慣れるまでは毎回このページのコードをコピペしてくれて構わないぜ(笑)
【転職エージェントをご存知ですか?】
WordPressでオリジナルテーマを作れれば、転職成功率はかなり高いです。
とはいえ、できるだけ給料・休み・リモートが多いなど、条件の良い求人に応募したいですよね?
転職エージェントなら、一般には出回らない好条件の非公開求人を紹介してくれます。
マイナビなど大手人材紹介業のプロが転職をサポートしてくれるので、安心して転職できるのもメリット。
完全無料なので、気になった方はメリットだけでもチェックしておくのがおすすめです。
⇒【これで無料?】WEBデザイナー向け転職エージェントが超便利。おすすめ8社も厳選。