- TOPICS -

【技術記事】2019年にもなって今さらですがWordPressテーマ自作のススメ

ご挨拶が遅くなりましたが、あけましておめでとうございます。本年もよろしくお願いいたします。

開発するのは楽しいゾ。ということで、今回はWordPress手作りテーマの動作確認も兼ねたテスト投稿となります。(変なエラー吐きませんように) 合わせて、初めてテーマを作成する上で参考にした書籍、Webページなどもいくつかご紹介したいと思います。

昨年の夏頃からこのイケてない、英語ページのみの何を主張したいのか良くわからない謎ホームページを刷新しよう刷新しようと思い続けてはや半年、目の前の仕事に流されて結局手を出せずダラダラと時間が過ぎ、いよいよ新年になってしまったので、これではいかんと思い、正月明け初週に意を決してホームページのデザインを一新させました。

ちなみに初期バージョンのWebサイトはこんな感じでした。

今回は真っ白なファイルに<!DOCTYPE html>を打ち込むところから始め(実際にはEmmet記法で「!」の一文字書けばheadタグやbodyタグも含め基本構造が一発で出てくるけど)、膨大なPHP構文エラー、無計画に書きすぎてついに1700行を超してしまったスパゲッティ状態のCSSファイル(調べれば誰でも参照できる状態ですが、見たところで何も得るものはありません。)、本番環境でのレイアウト崩れ、来客なんか完全無視で今ある全集中力を注入してコーディングしたファイルにこそっと余白を挿入してくれたり、勝手にpタグbrタグを消してくれたWordPressエディターの悪魔的な謎仕様?との格闘の末、ついに完成しました。午前6時半から作業を開始し、PHPのエラー潰しやHTML、CSS修正に夢中になっていて気付いたら午前4時半になっていた日もありました。それでも一応全くの白紙状態から作って形にはなったので、人間その気になれば何とかできるものですね。多い日は22時間労働をしていた一週間でしたが、わかる、わかるぞ、、、という状態になり、変な脳内麻薬が出てたせいもあり、至って健やかに一人デスマーチを乗り越えることができました。

なぜテーマを自作しようと思ったのか

さて、前置きはここまでにしておくとして、上で述べたように本ホームページはWordPressにて作成されているのですが、1年前、初めてホームページを立ち上げた当初は右も左もわからない状態でしたので、とりあえずでいいや、とテンプレートのデザインを拾ってきてそこに素材をポチポチ当てはめて作成していました。(それだけでもサーバーの開設やデータベース設定など、裏側の処理で結構骨が折れたのですが。) ちなみに利用していたのはこのデザインテーマです。

お手軽にそれっぽいwebサイトが作れるので、そもそもWebサイト作ったこと無いよ、という人が取り組む場合はテンプレートテーマで作成するのがオススメです。(テンプレデザイン使う場合は子テーマの作成と有効化を忘れずに!テーマのバージョンアップ時にカスタマイズしたデザインが吹き飛ばされます。)

しかし、いざ自分のビジネスで本格運用させていこうとなると、この部分のデザインだけピンポイントで変えたい、ここだけ文字フォントをもっとかっこいいのにしたい、となった時になかなか思い通りにいじれなかったりします。管理画面で設定できる追加CSSがうまく反映されなかったり、変更できたと思ったらその影響がページ全体に及んでいたり、むず痒い思いをたくさんさせられます。導入は易し、アレンジは難し、がテンプレートデザインの特徴というわけです。

そんなこんなでいよいよ実使用に耐えなくなってきたので、じゃあいっその事自分でゼロから作ってみよう、と思い立つに至りました。思い立ったきり半年放置してここまで行動しなかったけど。

備忘録がてら、どんな手順で進めたのか雰囲気が掴めるように書いておきます。テクニカルな部分の詳細は書きませんので、以下で紹介する書籍を当たるか、Google先生にご相談ください。

自作テーマ開発の段取り①エディタの導入

プログラミングをする上でのテキストエディタは各自好きなものを使って良いと思いますが、個人的にはAdobe Bracketsが使いやすいです。ライブプレビュー機能が付いているので、自分が書いたコードがどう表示されるか、横で結果を確認しながら作業が進められます。拡張機能も豊富なので、色々調べてみて便利なものを導入してみてください。(個人的にはEmmetは必須。)

■Adobe Brackets

自作テーマ開発の段取り②HTMLとCSSをそこそこのレベルまで理解する

Webページを作る上での第一歩はマークアップ言語であるHTMLとCSSを理解することです。CSSはごちゃごちゃしがちなのでプログラミング的に書けるSassも理解していたほうがいいですが(といいつつ私も触りしか知らない)、まずは原始的にCSSのみで頑張ってみて、これじゃあごちゃごちゃして駄目だ、と実感してからSassを勉強するくらいのノリがいいのかもしれません。参考書はこちらがよくまとまっていてオススメです。よくある典型的なWebサイトのレイアウトを網羅しており、HTMLを書く上で多くの部分を参考にさせていただきました。私は今までHTMLとかのマークアップ言語が好きになれなかったのですが、この本がそれなりに扱える(と思える)レベルまで引き上げてくれました。解説に従ってコードをひたすら写経していくと良いです。惜しむらくは出版が2015年とやや古いところ。

自作テーマ開発の段取り③作りたいデザインを決めて、ワイヤーフレームを作成する

上記の本でHTMLとCSSを一通り学習したら、いきなり書き始めるのではなく、Webページのワイヤーフレーム(設計図)を作成しましょう。ツールはAdobe XDが直感的に扱えてオススメです。

■Adobe XD

自作テーマ開発の段取り④ワイヤーフレームをHTMLとCSS使って再現する

テキストエディタでHTMLとCSSを編集してデザインを再現させましょう。凝ってないベーシックなデザインであれば上で紹介した参考書の内容のアレンジで大体行けます。なお、WordPressテーマでは基本的にstyle.cssファイルを参照するので、ページ数が複数あろうとcssファイルは原則style.css一つと考えたほうが後々楽です。(私はその事実に後で気づき、1ページに1つcssファイルを作成していたため後で面倒くさいことになりました。)

自作テーマ開発の段取り⑤ローカル環境での開発

HTMLとCSSでデザインを再現できたらいよいよWordPress化に移ります。何をするかというとHTMLファイルをいったんバラバラにしてパーツ化し、ヘッダーやフッターなど、どのページでも使い回しする同じデザインの部分をPHPに処理させるわけです。ここでPHPと聞くと尻込みするかもしれませんが、プログラミングにおけるif文、for文、while文といった基礎的な文法が理解できていれば問題なく対応できます。
HTMLファイルのPHP化に関する具体的な手順は下記の参考書が一番わかりやすく記載されていました。WordPressの参考書、どれも自分の肌には合わなかったのですが最終的にこの本が助けになりました。分厚い本ですが最小限立ち上げに必要な内容は最初の100ページくらいに網羅されています。

さて、肝心の実装ですが、まずはローカル開発環境(自分のPCの中に仮想環境を作って動作確認する)を準備しましょう。いきなりWebサーバーの環境に入ってごちゃごちゃいじるのは大変危険です。PHPは”;”の一文字が抜けているだけでも画面が真っ白になったり真っ赤な文字がいっぱい出てきたりするので、ローカル環境でのシミュレーションが終わってから進めてください。ローカル環境もMAMPを使った構築が主流だと思ってて1年前はそっちを使っていたのですが、ツイッターで詳しい人からwocker便利だよ、と教えていただき今回はそちらを利用しました。コマンドライン(黒い画面)が苦手でなければすごく便利です。vagrant upのコマンドで10秒で立ち上げられます。MAMPのデータベースエラーに苦しめられていたこれまでの時間は何だったのか。あとはlocal by flywheelも良いらしいです。使ったことはないので使用感はわかりませんが。とりあえずしばらくはwockerと仲良くやっていこうと思います。各自で色々試してみて、使いやすいと思ったものを使いましょう。

参考リンク①(Qiita) wockerについて

参考リンク②(Qiita) デザインテーマ化の流れについて

自作テーマ開発の段取り⑥ローカル環境から本番環境への移行

いよいよ最終ステップです。ローカル環境で作ったファイルをWebサーバー内にアップロードします。アップロードの仕方はFTPソフトを使います。
ちなみに私はFileZillaを使っています。

■FileZilla

Webサーバーへファイルをアップしたら、いよいよテーマの有効化です。ローカル開発環境でうまく行っていれば大きな障壁はないと思いますが、エラーや変なレイアウト崩れが生じたら直していきましょう。(ここが実は一番大変だけど) エラーが生じた場合はどのファイルで問題が起きたか、何行目がいけないのか、ヒントが載っているので頑張って英文メッセージを読んだり検索したりしましょう。

以上、フワッとではありますがWordPress開発の雰囲気がお分かりになれば幸いです。興味があれば他に解説の詳しいサイト、書籍があるので深掘りしてみてください。今回、自作テーマ作成を通してかなり勉強になった部分もあり、やってみて良かったと思ってます。まだ最小限のデザインでしか無いので、ちょっとずつチューニングしていい感じのWebサイトに進化させていきます! また、こんなレベルで良ければWebページ作成のお仕事依頼も歓迎いたしますので、お気軽にご相談ください。(大塚)

以下、本件の総括

(追記)この記事をPC、スマホで読みましたが文字サイズとかテキストエリアの広がりとかが微妙な感じですね、まだまだ改善が必要そう。

(追記その2)ツイートしてたらwockerの開発者様にコメント頂きました、何でもアウトプットして世の中に公開するのは大事 / そしてやはりツイッタランドは最強