ブログ

[WordPress]テーマ制作を手軽にスタートできるスモールスターターテーマを作りました

WordPressのテーマを作ろうと、いざコーディングを始めても、書くのは毎回同じようなコードだったりしませんか?

レイアウトもヘッダーがあってコンテンツとサイドバー、下にフッターというオーソドックスな形だと書くコードも似てくることがほとんどです。

当然、デザインによって違ってくる部分も大きいと思いますが、同じ記述部分をベースに、案件によって違う必要な部分を加えたり削除したりする。

そうすることによって、ゼロから築き上げていく工数を削除して、スピード感をもって制作を進めることができます。

また、クライアントには実際に触ってもらえるレベルにまで早く持っていくことができますので、コンテンツの入力をスタートしてもらうことも場合によっては可能ですし、好きなように触っていただいてウェブサイト運営開始前にWordPressに親しんでもらう機会も生み出せるでしょう。

まさに自分のために作ったWordPressスモールスターターテーマではありますが、肌感覚の合う方にはぜひ活用していただければと思います。

ファイル群の紹介

まずは、テーマ内にあるファイルについて説明します。

上の画像の左上から順に補足を表にまとめてみました。

ファイル名 役割
404.php アクセスしたページが存在しない場合に表示します。
検索やカテゴリー、タグクラウドなどのウィジェットを表示して再訪問を促しています。
archive.php カテゴリーやタグでの記事一覧を表示します。category.phpやtag.phpなどはこちらをベースに作成します。
comments.php コメントフォームやコメント表示部分のテンプレートです。
footer.php フッター部分のテンプレートです。全ページ共通です。
複製して別のパターンを作りwp_footer( '***' );といった感じで読み込んでもOK
functions.php よく使う機能や記述をまとめてあります。(常に使わなくてもよく使う記述は、今後、コメントアウトにて増やしていく予定)
header.php ヘッダー部分のテンプレートです。全ページ共通です
index.php ブログトップページのテンプレートです。今後コーポレートサイトに対応するためにfront-page.phpを作成した際には管理画面での設定やファイル名の変更(そのままにしておくと初期でトップページになってしまうので)などが必要になると思います。
page.php 固定ページのテンプレートです。スラッグごとのテンプレートなどを作る場合にはベースにします。
prepros-6.config これはGitHubには上がっていないローカル専用のファイルなので無視してください。(コンパイルソフトのPreprosの設定ファイルになります)
readme.html、readme.md GitHubでの説明用のドキュメントなので基本無視してください
screenshotフォルダ GitHubの説明箇所で掲載しているスクリーンショットを格納しているフォルダです。削除して構いません。
scssフォルダ 詳しくは後述します
search.php サイト内検索の結果を表示するテンプレートです。
sidebar.php サイドバーのテンプレートです。全ページ共通です。
single.php 記事詳細を表示するテンプレートになります。カスタム投稿タイプの記事専用のテンプレートなどを作る際にベースにすることができます。
style.css CSSファイルです。scssフォルダ内のstyle.scssをコンパイルして書き出しています。

scssフォルダ内にはこのようなファイルが入っています。

ファイル名 役割
_settings.scss ページ内各箇所の幅やメディアクエリのブレイクポイントなどの変数を設定しています
style.scss ベースとなるCSSを書き出しSCSSファイルです
ownedフォルダ mixinや変数、各種リセット用CSSなど自由に選ぶことができるように格納しています。_myresets.scssには自身でよく使うリセット系の記述をまとめてあります。

ざっくりとテーマ内に含まれているファイルはこのようなものがあります。実際のソースはGitHubにてご覧ください。

当テーマ制作の際に気をつけていること

テーマを作り始めると、どんどん便利な機能をつけたくなってしまいます。例えば、

  • カスタマイザーで背景色や文字色を変える
  • 痒いところに手がとどくウィジェットエリアを数多く作る
  • Google Fontを切り替えられる

などなど、便利な機能というのは際限なく浮かんできてしまいます。

しかし、販売したり公式サイトに掲載したりするためのテーマであれば、そういう機能が喜ばれたりするのですが、当テーマを作った趣旨としては「クライアントワークでWordPressテーマを作る際のスタートダッシュを素早く切れるスモールスターターテーマ」ということを考えていましたので、あまりにも多機能にして使わないものを増やすことはしたくありませんでした。

また、クライアントワークでカスタマイザーを利用したカスタマイズに対応することも経験上さほどありませんでしたので、このケースではあまり重宝しないだろうと思い、最低限のカスタマイザー対応で良いかと考えています。(カスタム背景とかカスタムヘッダー程度)

あとは、何にせよテーマ制作をスピーディーにできるように考えています。このまま有効化してもテーマとして当然機能しますが、かなりシンプルな作りになっています。

そこにスタイルや機能、動きを案件によって必要なものだけ付け加えていく。もしくは削っていく。そういった形で制作をスムースに進められるように配慮しています。

デモサイトについて

実際にプレーンのOD-Baseを触っていただけるようデモサイトを用意しました。

http://demo.olein-design.com/od-base/

今後の開発について

今後の開発については、このような点を考えています。

  • よく利用する細かな機能や関数を事前にコメントアウトで用意
  • よくあるレイアウトに対応できるようにテンプレートを増やす?(たぶんやらない)
  • SCSSファイルをもっと読みやすくする(でもモジュールごとに別ファイルにはしない)

日々草を生やしながらGitHubにて開発を進めていこうと思います。ご意見等お待ちしています。

Contact Form 7にYubinBangoで郵便番号から住所を自動入力させる方法

お問い合わせフォームや申し込みフォームなど、住所の入力を必要とするフォームにはよく付いています郵便番号を入力すると自動的に住所を入力してくれる機能ですが、導入するの大変なんじゃないの?と思いませんか?

僕も面倒なんだろうなぁと調べもせず勝手な先入観を持っていたのですが、ひょんな拍子で調べてみたらこんなライブラリを見つけまして、しかもWordPressで利用されるお問い合わせフォームを設置するプラグインの代表格と言っても過言ではないContact Form 7に導入する方法も試してみましたので共有してみます。

先にお伝えしておきます。めっちゃ簡単です。

YubinBangoライブラリとは

こちらのGitHubページで公開されているライブラリになります。

https://github.com/yubinbango/yubinbango

これまでにない設定方法(なんとclassを指定するだけ!)のまったく新しいライブラリが誕生いたしました!
このYubinBangoライブラリの革新的な設定方法は今は特殊に感じるかも知れませんが、10年以内にこれが当たり前になっていることでしょう。

ほんと当たり前になったら、もっと導入が進んでユーザーも便利になるはず。

まずはライブラリを読み込む

まずはWordPressテーマ側、functions.phpにてYubinBangoライブラリを読み込みます。

Contact Form 7の設定

まずは、Contact Form 7のフォームを作成するところで、このようにフォームを作成します。詳しくは後述します。

上記コードはこちらから引用させていただきました。

form内に国名(p-country-name)をJapanに指定

form内であればどこでも良いのですが、下記のコードをどこかに挿入しましょう。(上では7行目に掲載されています)

郵便番号入力inputにp-postal-codeをクラス指定する

郵便番号を入力させるフォーム部分にp-postal-codeをclass指定します。

郵便番号を最初の3桁と後の4桁とで分ける場合にも、同様に同じclass名を2つの入力フォームに設定します。(後述)

上の例では9行目に当たります。

都道府県、市町村区、町域、以降の住所の欄にそれぞれclassを設定する

下記の表にまとめたように、各入力フォームにクラスを設定します。

住所欄 指定するクラス名
都道府県名 p-region
市町村区 p-locality
町域 p-street-address
以降の住所 p-extended-address

formタグにh-adrクラスを設定する

設置するformタグにh-adrクラスを設定します。

Contact Form 7ではformタグは自動的に出力されるので、ショートコードに追記して追加します。

通常、このようなショートコードだと思います。

ここに、html_class="h-adr"という記述を加えて、

としてあげることによって、formタグにclassを追加することができます。

郵便番号入力フォームを2つに、各項目をそれぞれのフォームにする場合

郵便番号入力フォームにp-postal-codeというクラスを付与しなくてはならないと上で書きましたが、その際にフォームを2つに分ける場合は後述しますと書きました。

また、都道府県や市町村区をそれぞれ別のフォームにしたい場合も合わせてサンプルコードを掲載しておきます。

このように分けることによって、郵便番号フォームを2つ埋められた瞬間に住所を自動入力してくれるようになります。

まとめ

勝手な先入観で「郵便番号からの住所自動入力導入は面倒」と思い込んでいましたが、実際に組み込むまでに5分くらいで完了しました。

実際にはスタイリングなどもありますので、もう少しかかるかとは思いますが、既存のフォームに導入するのもそれほど難しいことではないかと感じました。

ぜひ、こういった便利な機能を制作者が簡単に導入できるようになり、それが最終的にユーザーの利便性向上へと繋がるお手伝いに当記事がなれば幸いです。

[WordPress]Olein Designのfunctions.phpを詳しく解説します(コピペ利用可)

WordPressのテーマを制作するたびに毎回ゼロからソースコードを書いていくのはとても大変なことです。全てを暗記できるわけでもありませんし、リソースを見ながら書いていくことがほとんどだと思います。

毎回同じ記述をするのであれば、自分のテンプレートを持っておけばいいじゃないか!ということで、自分のテンプレートを作って作業効率化を図っています。

こちらのブログでも他にfunctions.phpについて書いている記事があるのですが、そちらへのアクセス数が他の記事に比べて多くの方に読んでいただけているようです。

ですので、テンプレートを解説して置いておけばどなたかのお役に立つのではないかと思いまして、今回は自前functions.phpのテンプレートの中身を解説して掲載してみます。

僕が使っているfunctions.phpのテンプレート

今回、掲載するためにコメントにて簡単な役割と参照URLを加えました。必要ない場合には削除して使ってください。

では、簡単に各箇所について説明していこうと思います。上のコードをコピペで使うのが一番簡単なんですが、もう一歩踏み出して理解したいという場合には、以下の説明にも目を通していただけると、理解のお手伝いになるかと思います。

if ( ! function_exists( ‘lab_setup’ ) )とは

まず、3行目のif ( ! function_exists( 'lab_setup' ) )という記述ですが、これは「lab_setupという関数がなければ以下を実行しなさい」という処理を行うためです。

なぜこのような記述を行うかというと、将来子テーマを利用した開発にも対応するためです。

実際のところ、クライアントワークでは制作して納品したWordPressテーマに対して、後ほど子テーマを利用して何かカスタマイズするというようなことはほとんどありません。

そういう観点から考えると、この記述は必要ないとも言えるのですが、この記述方法を覚えておくと公式に掲載するためのテーマ制作では必要になってきますし、納品したテーマファイルを永久にメンテナンスしていけるとも限りませんので、将来的にどのようなカスタマイズにも耐えるためには、このように記述しておく方が無難かな、と個人的には考えています。

add_theme_supportでRSSを表示

add_theme_support( 'automatic-feed-links' );という記述をすると、生成されるページのheadタグ内に投稿とコメントへのRSSフィードリンクを掲載してくれます。

実際出力されるコードというのは以下のようになります。

こちらを挿入したい場合には記述するようにしましょう。一般的に記述しておいて問題ないかと思います。

add_theme_supportでタイトルを表示

add_theme_support( 'title-tag' );と記述することにより、headタグ内に自動てきにtitleタグにてページのタイトルを出力してくれます。

以前まではheadタグ内に下記のようにタイトルを出力させる方法が一般的でした。

厳密に言うと、固定ページやアーカイブページなど状況によって書き出し方を変えていたりはしていたのですが、WordPress4.1バージョンから上記のような記述はせず、WordPress側からtitleタグを出力する機能が付きました。

あまり詳しいことはわかりませんが、プラグインなどの兼ね合いなども考えると、WordPressのガイドラインに沿った記述が望ましいと思いますので、この記述によりタイトルを出力するようにしています。

add_theme_supportでアイキャッチ画像を利用できるようにする

add_theme_support( 'post-thumbnails' );と記述することにより、投稿などにアイキャッチ画像をつけられる機能を有効にすることができます。

最近では、ブログ投稿にとってアイキャッチ画像の役割というのは、色々な意味で重要だと考えられてきているので、企業ブログなどにおいても必要になることも多いのではないかと思います。

また、「投稿ページだけ」や「固定ページだけ」というような使い方もできます。

参照:関数リファレンス/add theme support | 4.2 投稿サムネイル

必要な状況に対応することも可能となっています。

add_theme_supportで各部分でHTML5マークアップを許可する

add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );という記述により、指定した部分をHTML5でマークアップしてコードを書き出してくれます。

ここ最近ではHTML5を利用してはいけない状況はほとんどないかと思いますので、この記述も必須としています。

add_theme_supportでテーマカスタマイザー内で編集ショートカット機能を利用できるようにする

add_theme_support( 'customize-selective-refresh-widgets' );と記述することにより、管理画面内のカスタマイズ機能を利用する際に、編集ショートカットを利用できるようになります。

この機能については参照記事を見ていただくとわかりやすく書かれていますが、ほぼクライアントワークには必要ないかと思います。

自身や自社にて親テーマとなるものを作って置いて、クライアントごとに子テーマにて開発する…という方法を取るのであれば、この機能を使いこなしておくことによって、カスタマイズも簡単になり、テーマの使いやすさも向上しますので、テーマの評価も必然的に上がることは間違いありません。

が、先ほども書いたように、クライアントワークには必要ないことの方が多いので、必要な場合には記述してみてください。

register_nav_menus()でカスタムメニュー位置を定義する

過去に書いたこちらの記事でも紹介していますが、カスタムメニューを利用する際に位置を定義するために記述します。

個人的にはクライアントの管理のしやすさや自由度、あとWordPressを利用する理由の一つとしてカスタムメニュー機能はとても大きいと考えていて、よく利用するのでテンプレートにも記載されています。

コンテンツ幅を設定

「コンテンツ幅を設定」と言われても、いまいちしっくりこないかもしれませんが、投稿や固定ページに画像などメディアを挿入することは多くあるかと思います。

その際に、あらかじめ設定してある複数の画像サイズなどから選択する形になるかと思うのですが、そこで設定される画像の最大値などを設定しておくことができます。

そうしておくことによって、コンテンツ幅(主にブログ記事部分の横幅)に合わせたメディアを自動的に生成してもらえるので、無駄に大きな画像をそのまま記載することで画像サイズが肥大してしまうことも考えられるので、設定するようにしています。

サイドバーを定義

register_sidebarを利用してサイドバーを設定します。

こちらを定義しておくことによって、ウィジェットを利用できるエリアを作成することができます。

本来の使い方であれば、ブログの右(あるいは左)に常設されるサイドバーではありますが、それだけではなく、トップページのコンテンツ部分にも上手く利用することにより、ウィジェット機能を利用して上手くクライアント側でコンテンツを入れ替えたり更新したり変更したりすることができるように作れます。

色々な用途で利用することができますので、よく活用するようにしています。

各スクリプトを読み込む

よく他の制作会社様が作られたテーマなどを拝見することもあるのですが、一番多いのがスクリプトの直記述かなと感じています。

直接、head内にCSSやJavaScriptsファイルへのリンクを設定する方法ですね。静的ページを作る際には当然そのように書くのですが、WordPressではちょっと違ったりします。

WordPressのテーマにはheadタグの最後にwp_head()、bodyタグを閉じる前にwp_footer()という関数を記述することは、ご存知の方も多いかと思います。

便利で数あるプラグインを利用するためには必ずこの記述をしなくてはなりません。でないと、プラグイン側からのコードが完全に出力されないので、便利に使うことができないからです。

それと同じような仕組みで、テーマ側で利用するCSSファイルやJavaScriptsファイルもwp_head()wp_footerを経由してリンクを設置する方法が推奨されています。

CSSを読み込む場合にはこちら、JavaScriptを読み込む場合にはこちらを参照していただくと、詳しい書き方が書いてあります。

まとめ

ざざざーっと走って書いてきましたが、個人的に使っているfunctions.phpのテンプレートはこのような感じになります。

このようなテンプレートを自分用に1つ持っていると、毎回同じようなことを書かなくてはならないという作業がなくなりますので作業の時短に繋がり、私たちフリーランスにとっては最終的に時給アップにも繋がるわけであります。

必要のない機能についてはコメントアウトしておけば、とりあえず良いですしね(最終的に消してしまえば良いわけですから)。ゼロから書くのが面倒なんです…。

みなさんのお役に経てば幸いです。

[WordPress]投稿や固定ページ、カスタム投稿タイプの使い分け方

WordPressはブログシステムを構築することをベースとして作られています。その上で、様々な機能やプラグインを利用してコーポレートサイトも構築することができる、ということです。ですので、あくまでも基本はブログシステムだと僕は考えています。(最近ではコーポレートサイトを作るが多くなってきましたが)

そして、WordPressにてページを作る上でベースとなるものとして「投稿」と「固定ページ」があります。

使い分け方としては、読んで字のごとくではあるのですが、ブログもしくはコーポレートサイトを構築するにあたってサイト構成を考えると思います。そして、「このページは投稿で作ろう」「このページは固定ページで実現しよう」などと構成を検討するかと思います。

この「ウェブサイトを構成する仕組み」はとても大切で重大なものでして、家づくりで例えるならば基礎部分の設計に値すると言っても過言ではありません。後から「やはり6畳部屋をここに追加」なんてことは簡単にできないのと似ていて、ページを追加する分には良いのですが、構成を後から変更することは設計をひっくり返してしまう可能性もあるので、しっかりと検討した上で制作を進めなくてはなりません。

今回は、これらを設計する上で「投稿」「固定ページ」はたまた「カスタム投稿タイプ」をどのように理解して使い分けて考えていけば良いのかを、僕の考えを元にまとめてみたいと思います。

投稿は時系列をともなくページに採用する

 WordPressをブログとして利用する場合、この「投稿」部分は「ブログ投稿」として利用されます。実際のブログの記事ページを記事ごとに生成するということですね。
 
コーポレートサイトとしてWordPressを利用する場合でも、企業ブログとしてこの「投稿」を利用することが多いです。

この「投稿」の特徴としては、時系列を持ったページを作る際に用いることをおすすめします。

時系列と言われてもピンとこないかもしれませんね。

例えば先ほども出てきた「ブログ記事」。このブログ記事は書けば書くほど、どんどん新しい記事を生み出します。そして、記事の投稿を繰り返していくと、昔書いた記事は古い、最近書いた記事は新しい日付が記載(されないものもありますが一般的に)されます。そして、時系列を持って管理されます。

コーポレートサイトで言うと、「お知らせ」ページなどは似たような要素を含んでいます。

GW営業のお知らせ、お盆休業のお知らせ、年末年始休業のお知らせなど、毎年知らせることになりますし、古いお知らせから新しいお知らせまで様々ですね。こういった時系列をもった情報を扱う場合には「投稿」がおすすめです。

固定ページは階層構造を持つページに採用する

WordPressにおいて固定ページは、主に「お問い合わせ」ページに使われたり、「企業概要」などの紹介に用いられたりすることが多いです。

これは先ほど説明した「投稿」とは大きく異なる性質を持つからです。

固定ページでは、階層構造を持つことができます。階層構造と言われても難しいので、図にしてみました。

このように、親ページがあり、その下に子ページがあり、兄弟ページもある場合もありますが、さらに孫ページを持たせることもできます。

例えば、コーポレートサイトを構築する際に、会社の商品やサービスを紹介したいと考えたとします。タイトルとしては「商品(サービス)紹介」というページを作ります。こちらが親ページになります。

そして、まずは商品やサービスをジャンルごとに分けて説明するページを作るとします。例えば、ジャンルA、ジャンルB、ジャンルCというような具合です。こちらは、先ほど作った「商品(サービス)紹介」ページを親とする子ページという位置づけで設定します。

そして、それらサービスの商品を詳しく説明するページを紹介・説明するページを作成します。ジャンルAの中の商品A、商品B、商品Cといった感じです。こちらが孫ページとなります。

このように、コンテンツを階層に分けて管理することができるという点が、固定ページの大きな特徴の1つと言えるでしょう。

他にも「投稿」「固定ページ」ともに特徴がありますので、まとめてみます。

投稿と固定ページの特徴まとめ

投稿の特徴 固定ページの特徴
時系列で表示される 階層構造を持つことができる
期間別のアーカイブを持たせられる 日付によるアーカイブがない
カテゴリーやタグによる分類ができない
(カスタマイズして使用できるようにすることは可能)
ページ属性によって、カスタムテンプレートを利用したり、順序をつけることができる
階層構造を持たない パーマリンクを設定するとスラッグでURLを管理することができる

ざっくりですが、このような特徴がそれぞれあります。上手に使い分けることによって、WordPressはとても便利なCSMにもなりますし、逆に使い方を間違えるととても使いにくくなってしまうので注意が必要です。

カスタム投稿はそれら以外のまとまったジャンルのページ群が必要な場合に採用する

WordPressには独自にカスタム投稿タイプというものを作ることができます。

例えば、コーポレートサイトなどで「お知らせ」を掲載したいが、「投稿」とは別に投稿タイプとして独立して作りたい。会社の商品を掲載するために独自の投稿タイプを設置したい。こういった場合に利用されることが多いです。

カスタム投稿タイプの特徴としては、

  • 階層構造を持たせることができる(「固定ページ」の特徴)
  • 複数のカスタム分類で分類できる(「投稿」の特徴)
  • 時系列構造を持たせることもできる(「投稿」の特徴)
  • ページ属性で順序をつけて表示させることもできる(「固定ページ」の特徴)
  • 非公開の投稿タイプをつくることもできる

という点が挙げられます。ほとんどの項目をみていただくとわかる通り、先ほどまで説明してきた「投稿」と「固定ページ」の特徴を持ったものがカスタム投稿タイプということになります。

ですので、「投稿に混ぜ込んで一緒に運用しようと思っていたけど…」というようなお知らせ機能だったり、「固定ページを増やして作っていた商品ページ」をカスタム投稿タイプで独立させてしまう、ということができるようになります。

正しい使い方をすれば、とても便利な機能です。

まとめ

簡単にWordPressの「投稿」「固定ページ」「カスタム投稿タイプ」について書いてみました。

ウェブサイトやブログを作るとき、もしくは制作を依頼するときに、これくらいの軽い知識を持っておくだけで、設計段階からも相手の言っていることが理解でき利用になると思いますし、とんでもない要望を出すこともなくなると思います。

「ほう、なるほどな」と少しでも気づきを生み出せる記事になれば幸いです。

[WordPress]カスタムメニュー機能の設定と設置と書き出されるソースコードを分かりやすく紹介します

WordPressテーマ制作の案件を多く受託することがあるんですが、残念ながら今までしっかりとWordPressに備え付けられているカスタムメニューという機能を活用することを前提に、設計・デザイン・コーディングされた案件に出会ったことがありませんでした。

WordPressを多く扱っている者としては普通と認識していることでも、周りがそうとは限りません。そして、せっかくユーザーにも便利に活用してもらえる機能なだけに、もっと中から外へ情報を発信していかないといけないのではないかと思いました。

今回はその、カスタムメニューの使い方についてまとめてみました。

カスタムメニューとは

カスタムメニューとは、管理画面から簡単に操作でき、任意の投稿や固定ページを任意の場所に表示することができるメニューのことを言います。

固定ページの一覧を表示する関数はすでにありますが、固定ページとカテゴリー、投稿などを混在させたり、順序を自由に決めることができません。カスタムメニューではそれらの不満を解消することができます。

メニューの作り方

まずは【管理画面】→【外観】→【メニュー】と進みます。

未だカスタムメニューを作成したことがない場合には、下のような表示になると思います。ここでは試しに[global]という名前のメニューを作成してみます。メニュー名を入力して【メニューを作成】を押します。

左側から任意のページを選んでみましょう。

チェックをして【メニューに追加】を押すと、

追加されましたね。カスタムメニューは「リンク先URL」と「ラベル」を設定することができます。管理しているWordPress内のページ以外の外部のサイトにリンクを張る場合に利用できます。

下のように、カスタムメニューに登録できる項目は、【投稿】【固定ページ】【カスタムリンク】【カテゴリー】の4項目となります。

メニューの位置については、詳しく後述します。

では、実際にテーマにカスタムメニューの位置を定義していきましょう。

カスタムメニューの位置をfunctions.phpに定義する

では、functions.phpファイルを開いて、カスタムメニューの位置を設定していきます。

順に説明していきます。

1行目のif文ですが、lab_setup()がない場合にlab_setup()を読み込む、という条件分岐になります。こうしておくことによって、子テーマでlab_setup()を定義した際に上書きすることができます。

2行目からlab_setup()関数を定義していきます。

カスタムメニューの位置を定義するには、register_nav_menus()を使います。今回は複数の位置を定義してみます。1つだけしか定義しない場合にも同じように1つだけ書けば大丈夫です。

参照:関数リファレンス/register nav menus

最後に、after_setup_themeのタイミングでlab_setup()が実行されるようにアクションフックを追加します。

先ほど後述すると書いてあったメニュー位置ですが、こちらが方法になります。次は実際に表示させてみましょう。

カスタムメニューを表示する

カスタムメニューを表示させるためには、wp_nav_menu()を利用し、パラメータで先ほど定義した位置やメニューを囲むタグ、メニューの表示階層数などを指定します。

参照:テンプレートタグ/wp nav menu

1行目:スタイリングしやすいように、div要素にglobal-naviクラスを付けてメニューを囲っています。
3行目:wp_nav_menu()でメニューを表示させます
4行目:theme_locationでどのテーマ位置のテーマを表示するかを指定します
5行目:メニュー自体を囲うタグをdiv要素に指定します
6行目:メニューを何階層表示するかを指定します。1と指定しているので親メニューだけを表示させるよう指定しています(0を指定すると全階層表示)

現状、実際の表示はこのようになります。

何もスタイリングしていないので、まっさらなHTML表示になっています。書き出されているHTMLはこのようになります。

Codexにもありますが、wp_nav_menu()で設定できるパラメータは以下のようになります。テンプレート的に使えますのでご利用ください。

こちらの書き出されるHTMLコードは以下になります。

こちらの書き出されるコードをちょっと理解しておくだけで、デザインが実現可能かどうか判断できると思います。(当然、デザイナーも少しはマークアップできるという前提ですが)

カスタムメニューをデザインする

では、このように書き出されたHTMLをどのようにデザインするのかを簡単に説明します。

先ほど掲載したHTMLソースコードをご覧いただくとわかるかと思うのですが、ほぼ全ての要素に自動的にIDやClassが設置されているので、CSSでのスタイリングにIDやClassに関して困ることはほぼないでしょう。

自動的に付与されるよく使うCSSクラス名

より一層、スタイリングをスマートに行う為にも、この書き出されるIDやClassの規則性を理解しておくことが必要となります。

下の表によく使うclass名と説明を掲載しておきますので参考にしてみてください。

class 説明
menu-item 全てのメニューに共通して付与されるクラス名
menu-item-object-[pbject] 全てのメニュー項目に付与されて、表示されているメニュー項目のタイプによって[object]部分が[page]:固定ページ、[post]:投稿、[custom]:カスタムメニュー、[category]:カテゴリーと変わります
current-menu-item 現在表示しているページのメニュー項目に付与される
current-menu-parent 現在表示しているページの親ページにあたるメニュー項目に付与される
current-menu-ancestor 現在表示しているページの祖先ページにあたる項目に付与される
menu-item-home トップページの項目に付与される

任意のCSSクラス名を追加する

管理画面から任意のメニュー項目に独自のCSSクラス名を付与することもできます。

まずは【管理画面】から【外観】→【メニュー】に進みます。すると、管理画面右上のあたりに【表示オプション】というタブが【ヘルプ】とならんで見えると思いますのでクリックします。

表示されたタブの中に【CSSクラス】という項目があるはずなので、そちらにチェックを入れます。

先ほど追加したメニューの項目(画面では「サンプルページ」という名前の固定ページ)の右側にある▲マークをクリックして、中身を展開してみましょう。

すると、先ほどまではなかった【CSSクラス(オプション)】という項目が表示されているはずです。こちらに任意のCSSクラス名を入力することによって、自由にメニュー項目にクラス名を追加することができます。

例として画像のように【sample-page】というクラス名を固定ページ:サンプルページに追加した際の、書き出されるHTMLソースコードを確認してみましょう。

ご覧の通り、4行目のli要素にclass名sample-pageが追加されていることが分かります。とても便利な機能ですので活用してみてください。

まとめ

長々とカスタムメニューについて説明してみましたが、どのような記述をすればどのようなソースコードを書き出されるのか、を理解しておけば、実際のどんなデザインが実現可能なのかを把握しておくことも可能です。

個人的な経験ですが、デザイン在りきの制作の場合、デザインを優先するがためにカスタムメニューという機能を捨てざるを得ない場合が過去にありました。

それは確かにクライアントの望んでいるデザインだったのでしょうが、それと同じように「クライアントが管理しやすいカスタムメニュー機能」を提案の一つに入れることも、クライアントにとって有意義となる可能性もあります。

私がディレクションして制作してきたWordPressを利用したウェブサイトに関しては、過去にもほぼすべてにカスタムメニュー機能を実装してきました。

それは、管理されるのが私たちのような専門家ではなく、クライアントさんであることが多いという点もあるかもしれません。

比較的豊富な予算をお持ちのクライアントさんの場合であれば、管理も請け負うこともできますので、メニュー構造の変更など技術があれば誰でもできます。

しかし、それほど豊富な予算を持たず、管理・運営はできる限り自分たちで行いたいというクライアントさんも多くみえます。そういった方々のことを考えた際に、メニュー項目の修正に毎度修正費用を負ってもらい専門家が修正する流れよりも、クライアントさん側で修正しトライ&エラーができる環境の方が双方においても有意義だと僕は考えています。

こういった便利な機能をしっかりと提案して活用しながら、クライアント自身が触りやす・扱いやすいウェブサイトを提供していく必要があるのではないかと日々思うわけです。

今回のカスタムメニュー機能もぜひご利用ください。