概要
数年後にまたWordPressを触ることになった時の忘備録。
WordPress 案件で簡単な改修を行う際に必要だと思った情報をまとめてあります。
対象
- WordPress 案件をやることになった WordPress 未経験者、あるいはブランクのある人
用語
- スラッグ(slug)
- ルーティングを決める際に使用される文字列。レガシーなウェブサイトでいうところの、ディレクトリ名やファイル名のこと
- パーマリンク
- URL のこと
セットアップ
参画したプロジェクトが追加改修案件だった場合は参画者向け資料を読んでください。
新規製作案件、あるいは諸事情により一から自分で考えてセットアップしないといけない場合は、MAMP と WordPress本体 をインストールしてローカルに環境を作ってしまうのが楽です。
MAMP を使ったローカル開発環境構築は ここ とかがわかりやすいと思います。
ググれば他にも色々やり方は出てくるのでお好みの方法でセットアップしてください。
WordPress のブロックエディタを、従来のエディタに戻したい場合
WordPress はバージョン5になった際、デフォルトのエディタを従来のエディタからブロックエディタに変更しました。
このブロックエディタを元のエディタに戻したいという場合は、公式が出している Classic ditor プラグインを入れてください。
ただし公式は2021年末にこのプラグインのサポートを打ち切ると言っているので注意してください。（注意しようがないですが...）
見た目を変える
WordPress の見た目はテーマによって変えることができます。
テーマは WordPressのルート/wp-content/themes/ ディレクトリに入れる決まりになっています。ここに入れたディレクトリにテーマとして必要なファイルが設置されていた場合、WordPress にテーマとして認識されます。
独自のテーマにしろ、既存のテーマにしろ、このテーマディレクトリに入っているファイルを編集することで見た目を変えることができます。
どのファイルをいじればいいか
文言修正、要素の位置変更などの DOM 構造をいじりたい場合
php で記述されたテンプレートファイルをいじることになります。
WordPress にはアクセスされたページによって優先順位の高い順にテンプレートを探しに行き、最初に見つかったテンプレートを元に画面を描画する仕組みが存在します。
例えばトップページにアクセスされた場合は、まず front-page.php を探しに行き、front-page.php が無かったら home.php を探しに行き、それも無かったら index.php をする、という風に順を追って描画するテンプレートを探します。
詳しくは テンプレート階層 - WordPress Codex 日本語版 の『概観図』をご覧ください。
具体的な投稿ページの判別方法。
- 投稿
- 管理画面の『投稿』 から投稿されていれば 『個別ページ』 の 『個別投稿ページ』です。
適用されているテンプレートはsingle-post.phpあるいはsingle.phpの場合が多いです。 - 固定ページ
- 管理画面の『固定ページ』 から投稿されていれば 『固定ページ』 です。
通常の投稿とは別に、固定のデザインを持ったページを作りたい場合などに使用されます。
固定ページにはカスタムテンプレートという、固定ページ用のテンプレートが適用されていることが多いです。
固定ページにどのテンプレートが当たっているかは、固定ページの編集画面に表示されている『ページ属性』の『テンプレート』の項目を確認してください。 なお、『テンプレート』 の項目が出ていない場合は、カスタムテンプレートは当たっていません。
- カスタム投稿タイプ
- 管理画面の投稿でも固定ページでもない、サイト独自の投稿項目から入稿されていたら、それはカスタム投稿です。カスタム投稿タイプは独自の設定を持った投稿機能のことです。
各プロダクトのページを/product/配下に作りたい、などの要望に答える時に使われます。
使用されるテンプレートはsingle-$posttype.phpとなります。上記のプロダクトページの例で言えば、single-product.phpです。 - アーカイブページ
- アーカイブページはカスタム投稿タイプで記事を投稿すると自動で作成されるカスタム投稿の一覧ページのことです。
例えばproductという投稿タイプを作成した場合、アーカイブページの URL は/product/に、カスタム投稿タイプの記事の URL は/product/slugになります。
アーカイブページと同じスラッグを持つ固定ページがあった場合、アーカイブページの方が優先されるルールがあります。 ただし固定ページ自体は存在するので、スクリプトから固定ページを参照することはできます。
ちなみにテンプレートは全てPHPで記述されております。
PHP 未経験者でも、PHP および WordPress は他のテンプレートや言語、CMS に比べて情報はたくさん転がっているので安心してください。
css や js をいじりたい場合
既存の環境でビルドツールを使っているなら、ビルドツールの設定ファイルを見れば変換前のソースの在りかがわかるはずです。package.json や webpack.config.js を見てください。
新規でテーマを作る際は、scss や es6 をトランスパイルしてあげるのがスマートだと思います。style.css を直に編集することはオススメできません。
ルート直下に js や sass などのディレクトリを切ってあげて、その中にお好みの設計を作り上げるのがいいと思います。
設計とかよくわからんという人は他の人が作ったテーマを参考にするといいと思います。
既存プロジェクトでファイルが見つからない場合
phpファイルはルート直下に template とか view などのディレクトリを用意して、その中にいれていることが多いです。
また、WordPressのテーマは functions.php, index.php, single.php, header.php, footer.php, style.css が最低限必要なのですが、逆にこれ以外のファイルは最初から存在しない場合もあります。その場合は自分で作ってあげてください。正しく作成すればテンプレート階層に従って、自動で WordPress が反映してくれます。
cssは直にstyle.cssをいじっている場合を除き、src や assets や scss などのディレクトリの中に入っています。
jsも同様です。
ビルドツールを導入しているのなら、そのビルドツールの設定ファイルを見ればどこに何があるかわかると思います。
既存プロジェクトでテンプレートの中にいじりたい箇所がない場合
WordPress はデフォルトの状態で、ヘッダーとフッターはそれぞれ別ファイルに記述されています。(header.php, footer.php)
他にもプロジェクトによっては共通パーツを別ファイルに分けて記述してあげている場合がほとんどです。
get_template_part などの関数で読み込んでいるファイルなども開い探してみてください。
それでも見つからないなら、そもそも開くテンプレートを間違えているか、非同期で読み込んでいるかなので気合い入れて探してください。
新しく css や js を追加したい場合
function.php に必要な処理を記述します。
css を追加するなら wp_enqueue_style 関数
js を追加するなら wp_enqueue_script 関数
上記関数を使うことで、新しい css や js を追加できます。
機能をいじる
機能をいじりたい場合は function.php に記述します。
ただ、なんでもかんでも function.php に記述すると function.php が汚くなってしまうので、機能単位でファイルを分け、それらをfunction.php がインクルードしてあげる仕組みにすると汚れにくいです。
新しい入稿項目を追加したい場合
WordPressにはそのような要望に答えるべく、カスタムフィールドという仕組みが用意されています。
カスタムフィールドの設定にはプラグインを使うのがお手軽です。
個人的には ACF(Advanced Custom Fields) がオススメです。
もし何かしらの理由でプラグインを使わない場合は、function.php の中 (あるいは function.php から呼び出される、カスタムフィールドを記述するのに適切なファイル) にコーディングしてあげてください。
WordPress の編集画面からカスタムフィールドを追加すると管理が面倒になります。
設定が終わったら get_post_meta などの関数で出力してください。プラグインを使っている場合は、プラグインが用意している出力用関数を使ってあげてください。
記事のスラグやパーマリンクを変えたい場合
記事のスラッグを変える
編集画面の『パーマリンク』から変更することができます。パーマリンクが重複していた場合、$slug-2 のようにハイフン + 連番のサフィックスがつきます。
パーマリンクを変える
- 投稿はスラグ以外、変えることはできません。URL の階層構造を変えることはできませんし、固定ページを親に設定することもできません。もし
/hoge/{$slug}のような構造にしたい場合はカスタム投稿タイプを使用することをオススメします - 固定ページは別の固定ページを親ページに設定することができます。固定ページ以外を親にすることはできません。また、アーカイブページとスラッグが被った場合、アーカイブページの方が優先されるので気をつけてください。（試したけど固定ページの方が優先されるよ！という方は、カスタム投稿で記事を投稿されているのを確認し、設定のパーマリンク設定を何も変更せずに更新してください。すると固定ページよりもアーカイブページのが優先されて表示されているはずです）
- カスタム投稿タイプは rewrite ルールを設定することで、デフォルトの命名規則と別のパーマリンクにすることができます
順次追加予定です。