「html／cssでのコーディングはできるけど、WordPressのカスタマイズはできない」というデザイナーやコーダーはまだまだ多いのではないでしょうか。
それからデザインではWordPressを導入する案件が多いですが、かくいう私もこれまではhtml／cssでのマークアップが主で、WordPressのカスタマイズは社内のエンジニアが担当していました。
そんな中で更なるスキルアップを図るべく、実案件でマークアップからWordPressのカスタマイズまで担当する機会をいただいたので、その際に感じたことや学んだことを書きます。
参考にした書籍
今回参考にした書籍はこちらです。
「WordPressの基本的な使い方はわかる」「html／cssは理解している」という人が初めてWordPressをカスタマイズするにあたり、準備からテーマ作成、拡張に至るまでを実践的に説明している教科書です。中でも、サンプルファイルを用いたテーマ作成が参考になりました。
テーマの作成手順
作成手順はさまざまな方法がありますが、今回は以下のようにベーシックな手順で作成しました。
↓
自作テーマフォルダを「themes」内に作成する
↓
ヘッダー／フッターなど、共通要素をhtmlファイルから切り出してphpファイル化していく
↓
ループなどの動的な要素を記述していく
「Blank WordPress Themes」という、カスタマイズを前提とした必要最低限のファイルが用意されているテーマもあるようで、今後効率のいい手順を探っていきたいです。
「カスタム投稿タイプ」のカスタマイズでつまずく
テーマ作成までは順調だったものの、「カスタム投稿タイプ」のカスタマイズに時間がかかりました…。
いくつかカテゴリーを作成する必要があったのですが「カスタムタクソノミー」や「ターム」など、聞き慣れない単語の意味を理解するところから、手探りでスタートしました。
また、投稿記事内で「複数枚の写真をスライダー化」させる必要があり、なおかつお客様の方でも簡単に投稿できる状態にしたかったので、今回はWordPressの標準機能である「ギャラリー」をカスタマイズすることで実現しました。
今後も活用したい便利なTips
WordPressのカスタマイズを経験していくなかでたくさんの学びがありましたが、その中でも特に汎用性のあるTipsをご紹介します。
標準機能をカスタマイズする
WordPressをカスタマイズするにあたり必ず注意されることですが、コアファイルは絶対にいじってはいけません。
今回の案件のように標準機能をカスタマイズしたい場合は、以下のようにショートコードを削除＆新しく定義して、コアファイルから該当部分をコピーすることでカスタマイズできます。
|
1 2 3 4 5 6 7 8 9 |
/* デフォルトの gallery ショートコードを削除 */ remove_shortcode('gallery', 'gallery_shortcode'); /* 新しい gallery ショートコードを追加 */ add_shortcode('gallery', 'my_gallery_shortcode'); function my_gallery_shortcode( $attr ) { /* コアファイルの内容をコピー */ } |
wp-login.php のパスを変える
WordPressのログイン画面URLは、初期設定だと「http://sample.com/wp-login.php」になりますが、このままだと簡単にログイン画面URLにアクセスされてしまうので、アタックを受ける危険性があります。
そのため、「http://sample.com/user/wp-login.php」等にURLを変更する必要がありますが、単純に階層を下げるだけではうまくいきません。「設定＞WordPressアドレス」を書き換えることで、パスを変更することができます。
処理がうまくいかない時に検証する
コードを書いてみたはいいものの、何も表示されなかったり、エラーが返ってきてしまったり…という現象は誰しも経験するはず。
そんな時、「どこの記述が間違っているのか？」「何が取得されていないのか？」を、以下のコードを挿入することで検証できます。
|
1 2 3 |
echo "<pre>"; print_r (検証したい変数); echo "</pre>"; |
おわりに
phpにはあまり馴染みがありませんでしたが、jQueryは普段から使用していたので、プログラミング言語特有の変数やif文にあまり抵抗がなかったことは利点でした。とはいえ、もっと高度にカスタマイズしていくためにはphpの理解が必要だと切に感じたので、習得目指して頑張ります！
