WordPressを使っていると、自分だけのオリジナルのデザインにしたり、自社のみのプラス機能をつけたいという時が出てきます。
「ただ、できればお金をかけずに自分で編集できるようになりたい」「今後もカスタマイズするかもしれないし、ある程度はスキルを身につけておきたい…」という方の為に、WordPressのカスタマイズのオススメ本と、簡単なやり方について纏めてみました。
CONTENTS
WordPressなどのインターネットサービスを利用して、WEBメディア制作などを行っている、株式会社ドミニオン 代表取締役 河村健一です。
約10年くらいの経験と知識を用いて、おすすめできるサービスやWordPressの始め方をご紹介しています。
Twitterでは日々、SEOに関することや近況を発信していますので、是非こちらもチェックしてみてください！
Twitter：https://twitter.com/ken84620459
WordPressのカスタマイズでおすすめの本4つ
まず、どれだけ難しくても自分で頑張りたい！勉強したい！といった方もいると思うので、カスタマイズに使えると思われる本をご紹介します。
筆者が読んだことがある本の中からのみ抜粋していますので、中には難しめのものもありますが、ご了承ください。簡単なHTMLやCSSに関しては、ネットの情報で検索するとすぐ出ることも多いかと思われます。
Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
まず、内容的には少々難しいのですが、Webのページが表示されるまでについて詳しく書かれている、Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)
多分、このぐらいの前提知識が無いと、「カスタマイズについて調べても理解できない」といった状況が起こりやすいのではないかと思われます。特にWebやプログラミング周りは専門用語が多く、事前に専門用語については学んでおくのがおすすめです。
初めてのPHP、MySQL、JavaScript&CSS 第2版
続いて、こちらの初めてのPHP、MySQL、JavaScript&CSS 第2版
WordPressというより、PHPからシステムを包括的に勉強したい人向けです。最後には、アプリケーションを作るデモもあるので、一通りやれば大体の知見はつくかと思われます。
「初めてのPHP、MySQL、JavaScript&CSS 第2版」はこちら
初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発
こちらの本はJavaScriptについて、ほとんどが網羅されています。最初のうちは、これを読んでおけば、基本的に全ての知識が入るかと思います。ただしページ数が多いので、かなりやる気の有る人や、粘り強くやれる人におすすめの本です。
CSSシークレット ―47のテクニックでCSSを自在に操る
こちらの本は、CSSの中級者向けのテクニックについて網羅されています。ハックを推奨するわけではないスタンスですが、ハックについても紹介されています。中級者向けにしっかり書いてある本ですので、多少の基礎がわかる方にはとてもオススメの本です。
ゼロからワードプレスを体系的に学ぶならプログラミングスクールがおすすめ
【公式サイト】https://techacademy.jp/wordpress-bootcamp
また、ゼロからしっかりとPHPやWordPressを学んでいきたいという方は、筆者も受講したワードプレスを学べるプログラミングスクールのTechAcademyを活用するのが一番おすすめです。やはりプログラミングスクールの方が体系的に知識を身に付けることができますし、すでに専門的な知識を持った方にあれこれと質問できるのが非常に効率的でした。
TechAcademyは完全にオンラインのプログラミングスクールで、テキストで課題を解きながら進んでいく形式です。課題を提出するとレビューしてもらえますので、しっかりと自分が理解できていない部分などが明確になり、スキルが身につきやすいです。
上記は実際の筆者の受講画面ですが、上記のように項目ごとに課題があり、レビューを受けることができます。TechAcademyはテキストを学習していてわからない点があれば、Slackで現役エンジニアに質問することができます。
それに加えて、週2回ほどオンラインでのメンタリングもあります。1ヶ月で115,000円程度の費用がかかりますが、長期的に考えると回収が可能な金額ですし、自己投資としては非常にコスパが良かったです。
TechAcademy含めてプログラミングスクールはほとんどが無料体験レッスンを提供していますので、どんなものかオンラインで受講されてみるのもおすすめです。
初心者はWordpressではどこをカスタマイズすべき？
WordPressではどこらへんをカスタマイズできるのでしょうか？
WordPress (ワードプレス) は、「オープンソースのブログ／CMS プラットフォーム」のため、根幹のシステムがあるはずです。その機能が「ログイン機能」「DB(データベース)連携設定」「ユーザー管理機能」あたりにあったりします。
この辺のシステムを初心者の方がいじるのは少々危険ですので、初心者の方には、ここならいじっても比較的安全というファイルをお伝えします。それは、「wp-content/themes」内にあるフォルダとファイルです。
ここのファイルであれば、編集しても基本的に大丈夫です。
と言いますのも、より正確な表現をすると、テーマファイルというのは「そのテーマ」のみに適応されるので、失敗しても他のテーマを選択したり、テーマを入れ直したりすれば元に戻るからです。そのため、わざわざバックアップを取らなくても復元可能ということです。
もっと細かくそれぞれのファイルについて詳しく知りたい方は、こちらの記事（WordPressの仕組みを理解する）を参考にしてみてください。
WordPressの既存テーマ（twentyseventeen）をカスタマイズ
「wp-content/themes」の中のファイルのみを変更していくとなると、基本的には既存テーマをカスタマイズしていくことになります。
そこで、ここではカスタマイズしたい方法別に、どのファイルを編集すれば良いのか？を解説していこうと思います。説明には、「twentyseventeen」のテーマを使います。
色や見栄えなど(CSS)を変更したい
まずは、色や見栄えなどのスタイルを変更したい場合です。その場合は「style.css」(他のテーマだと同じような.cssがあるはずです)を編集します。
言語はCSSで書かれていることが多いので、これを書き換えていきましょう。(CSSの知識が必要になります)
こちらのスタイルシートを変更していくことで、見た目を変えることが出来ます。
こういったファイルの編集は、バックアップを取っていないと全て上書きされてしまうため注意が必要です。
ページの表示部分のシステムを変更したい
次は、ページの表示部分に関してです。これは「ヘッダーのメニューバーの位置」などを変更できるということです。
テーマごとにも異なるため、大枠を分かっていただければと思いますが、以下の表の様に機能しています。
上記の画像は、
- page.php : 固定ページの表示フォーマット
- footer.php : フッターの表示部分
- front-page.php : フロントページの表示フォーマット
- single.php : 投稿記事の表示フォーマット
- archive.php : カテゴリー毎の投稿一覧
- header.php : ヘッダーの表示部分
などのようになっています。
基本的にはphpファイルを編集していくことになるので、プログラミング言語的にはphpの知識が必要です。ファイル名で予測できるものが多いですが、archive.phpのようにちょっと分かりにくいのもあります。
ページの処理部分を変更したい
次は、ページの処理部分です。これは、初心者のうちは気にしなくてもいいかと思います。
筆者がやっているカスタマイズは「ディスクリプションの自動挿入」です。テーマによっては、SNSでの拡散設定(OGP,Twitterカード)などをここで行っています。これらの処理は面倒なことに”テーマ次第”でファイルの在り処が全然違います。
twentyseventeenでは3つのフォルダに分散されています。
※一例を挙げますが、「template-functions.php」を操作すると、テンプレートとして挿入されているHTMLタグの編集ができます。
これらのファイルになってくると、コードを読むのも大変なものも出てきます。
WordPressでのCSSのカスタマイズ方法2つ
「見た目だけ少し変えれればいい！」という方のために、CSSのカスタマイズ方法をお伝えしておきます。
① デベロッパーツールを使う
一つ目はデベロッパーツールを使ってしまう方法です。
この方法は、実際の表示を確認しながら編集ができるので、手間もかからずに早いので楽です。(筆者はよくやります)まずは、編集したいページでデベロッパーツールを開きます。
デベロッパーツールの使い方が分からない方は「Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能」を御覧ください。
ここでCSSを変更していきます。CSSは右下のボックスで変更できます。
ここで編集したあと、「style.css?ver~~」のように書いてある文字をクリックすると、編集中のスタイルシートが表示されます。これをコピーしてstyle.cssにペーストすれば完了です。
※style.cssは「ダッシュボード」→「外観」→「テーマの編集」から直接編集できます。
※キャッシュの関係で、すぐにはデザインが適用されないことがあります。その場合は、キャッシュの消し方を確認してください。
ローカル開発環境を使う
次は、ローカル開発環境を使う方法です。
とはいっても、実際にローカル開発環境でスタイルシートを編集し、アップロードするだけなのであまり流れは変わりません。開発環境を立ち上げるのに莫大な時間を使うことになるかと思うので、「Instant WordPressで超簡単にワードプレスローカル環境を構築する方法」を参考にやってみてください。
WordPressのカスタマイズの方法に関するまとめ
以上、いかがでしたか？WordPressのカスタマイズ方法について、ばっと纏めてみました。
筆者も普段からカスタマイズをしているので、HTML,CSS,JavaScript,PHPは扱えますが、初心者が調べながらやるには結構大変だと思います。
ですので、Wordpressのカスタマイズについてあまり時間をかけたくない！という方については、最初からStork
などの有料テーマを使ってしまった方が、時間削減になるためおすすめです。
毎回毎回カスタマイズ方法を調べるよりも、最初からデザイン性やSEO対策などが施されたテーマを利用した方が、後々のメンテナンスなどが楽になるとは思われます。それでは最後まで読んでいただき、ありがとうございました。
Storkの公式サイトはこちら：https://open-cage.com/stork/
