正直この分岐コードを全て覚える必要性なんてないと思っているのでいつもその都度Google先生で調べています。
しかしいつも使うのであれば覚えるべきなのではとも思いつつも、それもちょっとと大変だなという結論に達したので、備忘録として自分用にまとめてみました。

いろいろなページ分岐タグのまとめ・一覧。

ワードプレスのトップページに関わる表示分岐

トップページのみに表示したい場合

トップページのみ表示したくない場合

条件の前に「!」をつけると、指定した条件以外になる。
これは覚えておくとよろしい部分。

トップページとそれ以外のページで表示内容を変更したい場合

※このはこれから説明する分岐の全てに利用できます。
is_homeとis_front_pageの2つの関数を指定しているのは、それぞれ場合によりトップページの表示方法が異なるからですね。
index.phpを利用している場合もあれば、「設定」の「表示設定」からフロントページ表示している場合もあるので2つ同時に指定します。

このトップページのみに表示したいページ分岐に関しては「front-page.php」を独自に作ってトップページとしている場合はあまり使わないかな??
使うとしたらheader.phpやfooter.phpの共通部分に対してなのかなと。

固定ページ(page.php)に関わる表示分岐

固定ページのみに表示したい場合

ここでいう、固定ページのみというのは、ダッシュボード内で「固定ページ」で作られたすべてのページを指します。
しかし、固定ページの中でも特定のページのみに表示したい!という場合も出てきます。
そんな時はページIDを指定してあげる。
パーマリンクをいじっているからそれぞれのページのぺージIDがわからない!という場合、固定ページ一覧から該当の固定ページのタイトル部分にカーソルをあててみましょう。

するとブラウザの左下に「…post.php?post=●●&action=edit」と表示されます。
この●●の部分がページIDとなります。

特定の固定ページのみに表示したい場合

特定の固定ページ(複数ページ)のみに表示したい場合

ちなみに、ページIDではなくスラッグやタイトルでも分岐は可能ですが、よほどの条件ではない限りあまり使わないかと。

この特定の固定ページのみに表示というのは結構使いますね。
「特定の固定ページのみに表示+カスタムフィールド」のコンボなど。

投稿ページ(single.php)に関わる表示分岐

投稿ページのみに表示したい場合

特定の投稿ページのみに表示したい場合

特定の投稿ページ(複数ページ)のみに表示したい場合

ここの指定でarray以下が10個も20個もページIDを記入しなくてはならなくなる場合は、長ったらしくなってしまいますね。
その場合はちょっと考えてください「あれ、この指定した記事はなんの共通点があるのだろう??」と。

ワードプレスはとっても優秀。
「特定のカテゴリに属する記事のみ」や「特定のタグが関連づけられた記事のみ」というグループごとでの分岐も可能!

特定のカテゴリーに属する記事のみに表示したい場合

そして、固定ページと同じくカテゴリーA(カテゴリーID「1」)、カテゴリーB(カテゴリーID「2」)のどちらかのカテゴリーに属している投稿記事のみに表示したい内容がある場合は

となりますね。

特定のタグがついた記事のみに表示したい場合

アーカイブページ(記事一覧ページ)についての表示分岐

記事一覧ページをつくるには、archive.phpやcategory.phpなどを作成することが一般的ですね。

アーカイブ(記事一覧ページ)のみに表示したい場合

こだわっていくと、アーカイブの中でもカテゴリーアーカイブに表示したい内容、タグ別アーカイブに表示したい内容まで分ける場合もあり、
さらにはカテゴリーの中で特定のカテゴリーアーカイブのみに表示したい場合も出てきます。

特定のカテゴリー一覧ページのみに表示したいなどの分岐が必要になる場合。

スラッグでも指定可能。

カテゴリーに属している記事のみに表示する場合と、カテゴリーページに表示する場合で記述が似ているので要注意。
意味合いが全く異なりますね。

アーカイブページ(記事一覧ページ)でページネーション(ページ送り)がついている場合、その一覧の1ページのみに表示したい場合などもありますね。
弊社サイトでいう、ここの部分。

2ページ目以降にはいらないなという場合。

アーカイブページ(記事一覧ページ)で1ページ目のみに表示し、2ページ目以降では表示しない場合

これは例えばカテゴリー一覧ページに対してカテゴリの説明文を表示している場合など。
ページ送りで次のページに移動してもまた説明文を出す必要もない場合など、各カテゴリーページの1ページ目のみに出したりします。

その他のページについての表示分岐

検索ページ(検索結果ページ)のみに表記したい場合

まぁsearch.phpがあるといえばありますが。

404ページのみに表記したい場合

検索ページと同じく404.phpで対処できる場合が多いですね。

今回のページ分岐タグについてのまとめ

このページ分岐タグを利用するとこんなことができる。
例えば一つのサイトで種類により異なる広告(バナー)を表示したい場合などは、

こんな感じになります。
今までワードプレスをカスタムしている中でテンプレートがどんどん増えてしまって困っている方、条件分岐タグを押さえておけばグッとテンプレートが少なくなり管理もしやすくなってきます。

この「ページ分岐タグ」とカスタムフィールド(例により Advanced Custom Fields )がおすすめを組み合わせることにより、
デフォルトのテンプレート一式のみで様々なレイアウトに振り分けることが可能になるのです。

同じような分岐タグで「PC」と「スマホ」の分岐タグなどもありますが、それはまた次の機会で。

ワードプレスのカスタム・オリジナルテンプレート作成は正直楽しいと感じている人も多いのではないでしょうか。
私もそうです、
各記事のエディター部分は極力シンプルに。
複雑な部分は大体テンプレートに吐き出しを。
を心がけております。そして楽しい。

しかし気をつけなくてはならないことは、「自分だけがわかるテンプレート」ではダメだということ。
第三者が見て分かり、使いやすいようにできるだけシンプルに作成することを心がけてみてください。

目次

  1. 通常のアンカータグ
  2. 別ページへのアンカータグ(ページ遷移あり)
  3. 同じページの特定箇所へのアンカータグ(ページ内リンク)
  4. 別ページへのアンカータグ(javascriptで少し工夫)
  5. ポップアップで別ページ表示(jQuery版)

※今回はコンテンツをポップアップするモーダルウィンドウのようなイメージではなく、完全に異なるページを開くやり方

通常のリンク指定をしてみる。

ここら辺はおさらいというか基礎知識。
一般的なホームページを作るのであれば、一番使用頻度は高いはずです。

そして「ホームページを作りたい!!」と意気込んで勉強し始めた場合、一念発起した当日か翌日くらいに身につける部分ではないでしょうか。

するとブラウザ上では

デモ:通常のページ遷移 Yahoo!のホームページ

と表示されますね。
も文字部分をクリックするとその他ページに飛びます。

ホームページ内で別ページへ飛ばしたりする場合に使います。

別ページへ飛ばす「target=”_blank”」というリンク指定をしてみる。

せっかく自分のホームページを見てくれている人をリンクで他のサイトへ飛ばしたくない場合ってありますよね。
そのような場合に使うことが多いと思いのでは。

リンクテキストを右クリックすると「新しいタブで開く」ってメニューが出てくると思います。
これのイメージです。

するとブラウザ上では
デモ:別タブの遷移 Googleのホームページ
と表示されます。

先ほどのYahoo!の場合と違い、この記事のページを残したまま異なるページを表示させることが可能です。

ページ内リンクを指定してみる。

イメージとしてはこのページの「目次」部分です。
該当の項目をクリックすると、指定場所へ遷移すると思います。

このページの最初の見出しの
<h2>通常のリンク指定をしてみる。</h2>
ここの部分を

<h2 id=”#page-index01″>通常のリンク指定をしてみる。</h2>

というソースで記述しています。

そして上記の「#指定の属性名」の部分を「#page-index01」と、属性を合わせてあげると、

↑の「通常のリンク指定をしてみる。」の箇所へ移動

こんな感じで同一ページ内で特定の箇所に遷移することが可能です。
Smooth scrollなどの挙動と合わせれば、ゆっくりと移動していきますね。

ウィンドウサイズを指定して別ページで開く

別ページタブで開きたいけどサイズを指定したい場合。

弊社の名刺の記事をちっちゃく開いてみる

※width=400 → ウィンドウの横幅(px)、height=600 → ウィンドウの縦幅(px)

最後のreturn falseでhref=””の中身を無効化して、window.openの中で指定したURLへリンクしています。
なんか気持ち悪いなという場合は、

これでもOK。

逆に、もっとシンプルにしたいんだという場合はアンカー部分を

として、別にhead内に

こんな記述にしても同じ動作になります。

デモ:head内記述の別パターン

jQueryを使ってちょっとかっこよくポップアップしてみる。

使うjQueryは「colorbox」。
ダウンロード元:Colorbox – a jQuery lightboxの青い「Download」ボタン

基本的なファイルは「jquery.colorbox-min.js」とexample●の中から好みのデザインのフォルダの中の「colorbox.css」と「images」フォルダ一式OKです。

head内に記述

jQueryはご自身の都合に合わせて。
jquery.colorbox-min.jsはアップロードしてディレクトリ先の指定してあげてください。

そして、cssを元々のcolorbox指定のcssからいじらないで利用する場合は、colorbox.cssをアップロードしたフォルダに「images」フォルダをそのままアップしてください。

HTMLの記述

デモ:弊社のSEOについての記事

こんな感じになります。
上記はダウンロード元から落としたcolorboxの中の「example3」のデザインを利用しております。
widthとheightを%指定してあげればスマホでも特に問題ありません。

が、私はスマホでポップアップする意味に懐疑的なので使い方は考えますが。

リンクの仕方についてまとめてみたのまとめ

要するに別ページに飛ばすやり方も様々であり、使う場面が重要だということです。
同じページ内で今のページを残したまま別ページを開かせるような指定が多発すると、1サイト見終わる頃にはブラウザがタブだらけになってしまいストレスがたまります。

しっかり目的を持って、見る人が使いやすいサイト設計を心がけた上でアンカータグの工夫をすることが第一ですね。

ワードプレスデフォルトの管理画面内記事一覧表示にカラム追加

ここの項目を変えたい!そんなお話です。

カスタム投稿&カスタムフィールドはだいたいプラグインを使ってしまいます。

まず、
カスタム投稿ってなんだ?カスタムフィールドってなんだ?
という方に簡単な説明を。

カスタム投稿とは

ワードプレスをいじったことがある方であればわかると思いますが、ワードプレスは「固定ページ」と「投稿ページ」に分かれていますね。
基本的にはこの2つを使い分けてサイト構築をしていくと思います。

一般的なワードプレスサイト構築の場合、日々更新していくインフォメーションとかは「投稿」。
対してあまり変わらない「会社概要」みたいなものは「固定ページ」みたいなイメージでしょうか。
最近ではワードプレスの公式テーマではなく、配布されているテーマをインストールすると初期状態で「お知らせ」みたいな投稿画面が付いているテーマもあります。

これがカスタム投稿です。
「投稿」とは別軸で更新できるコンテンツを作ってあげることになります。

「Custom Post Type UI」を使って独自の投稿軸を作る

だいたい使うのは「Custom Post Type UI(CPT UI)」というプラグインですね。
プラグインの使い方に関しては説明を省きますが、使い方を大変丁寧に説明してくれているブログがいっぱいあるのでご安心ください。

参考1:https://techacademy.jp/magazine/4532
参考2:http://kotori-blog.com/wordpress/custom_post_type_ui/

で新たに「今日の朝食」という投稿軸を追加してみます。
すると新たにダッシュボードの左メニューに「今日の朝食(スラッグ:breakfast)」という項目が追加されます。
※わかりやすいようにタクソノミーとかカテゴリはつけていません。

で幾つか更新してみるとこうなります。

独自の記入欄・カスタムフィールドを設置

カスタムフィールドというのは、投稿画面に独自の値を入れる部分ですね。
通常投稿画面は「タイトル」と「本文」が記入できるスペース、それに加えて「カテゴリー」や「タグ」「アイキャッチ」を設定できますね。

ここにさらに独自に必要な値を入れるスペースを作ってあげる。

「Advanced Custom Fields」を使ってカスタムフィールドを作る

カスタムフィールドを作るのもプラグインを使っています。
カスタム投稿もカスタムフィールドも特にプラグインを使わずにfunction.phpへの記述で対応できますが、プラグインは極力使わない私もここの設定に関しては使いやすさの観点からプラグインを利用しています。
Advanced Custom Fieldsの使い方も検索すれば山のように使い方が出てくる・大変有名なプラグインですね。

さて、早速作ってみましょう。
先ほどカスタム投稿で作った「今日の朝食」に「場所(フィールド名:shop)」というカスタムフィールドを追加します。

で、追加すると

のように投稿画面に新たに「場所」を入力するスペースが生まれます。
※実際の記事への出力コードもここでは省略。

一旦すでに追加してある「今日の朝食」にそれぞれ「場所」を入力。
ただ、入力したからといって一覧画面に変化があるわけではありません。

で、ここからが本題。
一覧画面に今それぞれの記事に入力した「場所」の値を出力したい。
ここではいじるのはfunction.phpです。

function.phpにカスタムフィールドの値を一覧のカラムへ追加する記述

ここで、たまに記述の仕方を間違えるとワードプレスが真っ白になってしまう大変怖い「function.php」に追記します。
私はfunction.phpをいじる際は必ずバックアップをとります。

カスタム投稿タイプ:今日の朝食(スラッグ:breakfast)

カスタムフィールド:場所(フィールド名:shop)

の場合の記述

すると、無事に一覧表示にカスタムフィールドの値が表示され、大変見やすくなっちゃいます。

ボリュームの大きいホームページになればなるほど管理が大変

どんどんホームページが成長していくと、どうしてもぶつかる記事の管理という問題。
今回の方法で少しでも管理がしやすくなれば幸いです!

当然通常の投稿や固定ページにも応用できるやり方ですのでご自身のホームページに合わせてうまく利用してください。

私がWordpress(ワードプレス)に出会ったのは、6年前で2011年からの付き合いとなります。

当時はまだまだウェブについても知識は少なく、静的なHTMLやCSSを元にカタカタ作っていて、1つのサイトを作るのにとても時間がかかっていたのを覚えています。
またinclusedなどの処理を完全に無視した作りだったので、出来上がったサイトは下層ページのリンクは繋がっていないわ、ディレクトリ指定の違いで画像は表示されないわでもうどこから手をつけていいのかというくらいひどいものでした。

ちなみにその時はまだガラケーがまだまだ現役でPCサイト、スマホサイト、モバイルサイトを制作しておりました。そしてウェブデザイナー泣かせとして名高いインターネットエクスプローラ8も幅を利かせており、今のようにぐわんぐわん動きを入れてしまうと全く動かないなんてことはよくありました。。。

『こんなにサイト制作は難しいのか』と途方に暮れていた時いろいろ調べていたところに見つけたのが、Wordpress(ワードプレス)でした。

6年前はCMS(コンテンツマネジメントシステム)という言葉が自体がまだまだメジャーではなくWordpress(ワードプレス)の利用者数は少なくではなかったです。もしかすると私の周りの制作会社だけかもしれませんが。。。

そんなわけで出会ったWordpress(ワードプレス)。
多分『これからの時代はWordpress(ワードプレス)だ!』という安易な記事タイトルに引かれ読んだんだと思います。

あの頃は今のようにどのサーバーもワンクリックでWordpressインストールなどはできるはずもなく、Wordpressのインストール方法のサイトを見ながらデータベースの制作からFTPでのアップロード、そしてデータベースとのつなぎこみとインストールするだけなのにとてもややこしかったのを覚えています。

WordPressをインストールし驚いたこと

WordPressをインストールし驚いたことはいくつもあります。

・ヘッダー、フッター、サイドバー、コンテンツなどなどすべて分かれているのでディレクトリを気にせず制作できる
・デザインフォーマット(テーマ)という概念があり、デザインを着せ替えできる。
・サイトマップを自動で送信できる機能を追加できる
・お問い合わせフォームを追加できる。また簡単に内容変更できる。

などなど従来HTMLしか触っていない私にとっては青天の霹靂でした。

ノンプログラマーでもなんでも出来てしまう革新性

今さら革新性も何もないのですが、
Wordpressにはテンプレートタグというものがあり、決まった情報を入力するだけで日付の取得や過去に書いた記事の呼び出し、
ニュース一覧の作成などあげればきりがないほどなんでも出来てしまいます。

またプラグインという、WordPressの機能を拡張するためのツールがあります。
そこには世界中のプログラマーが作ったプラグインが山のようにあります。

プラグインと一言で言っても、お問い合わせフォームやサイトマップの作成や管理画面を使いやすくするものだったり、
本当にさまざまあります。

ただ、だれでも制作可能なため、品質の良いもの、悪いものがあります。
これはまた別記事で弊社が培ったノウハウで選びに選んだ良質プラグインを紹介する場を設けたいと思います。

ノンプログラマーな私でもWordpressテンプレートタグやプラグインのおかげで、
いろいろな事を試せましたし、クライアントの要望に応えることができました。

WordPressの創始者に会う

そして、2014年にWordpressの創始者であるマット・マレンウェッグに会うことができました。
雲の上のような人なのですが、ものすごい気さくな方で驚き。

講演に入るとWordpressのスマホ最適化など未来を見据えたビジョンを語っていました。
今でこそメジャーになりつつあるAMP設定ですが、そのころからすでに彼の頭の中ではイメージされていたのではと今になって思います。

今後のWordpressについて

今や世界のウェブサイトの3割がWordpressで作られております。
Wordpressの次をいく次世代CMSが発表されては消えており、まだまだこのシェアの崩れはしないでしょう。
弊社でも8割がWordpressでの制作案件となっております。

今後はいちウェブ制作会社としてWordpressを利用しよりよいご提案ができるように尽力をしたいと考えておりますのでどうぞよろしくお願いします。