WordPress

WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

settings-265131_1920

WordPressを使っていると、自分だけのオリジナルのデザインにしたり、自社のみのプラス機能をつけたいという時が出てきます。

「ただ、できればお金をかけずに自分で編集できるようになりたい」

「今後もカスタマイズするかもしれないし、ある程度はスキルを身につけておきたい…」

という方の為に、WordPressのカスタマイズのオススメ本と、簡単なやり方について纏めてみました。

WordPressのカスタマイズでおすすめの本4つ

まず、どれだけ難しくても自分で頑張りたい!勉強したい!といった方もいると思うので、カスタマイズに使えると思われる本をご紹介します。

筆者が読んだことがある本の中からのみ抜粋していますので、中には難しめのものもありますが、ご了承ください。

簡単なHTMLやCSSに関しては、ネットの情報で検索するとすぐ出ることも多いかと思われます。

Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)

q? encoding=UTF8&MarketPlace=JP&ASIN=4774142042&ServiceVersion=20070822&ID=AsinImage&WS=1&Format= SL160 &tag=webcode06 22 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめir?t=webcode06 22&l=am2&o=9&a=4774142042 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

まず、内容的には少々難しいのですが、Webのページが表示されるまでについて詳しく書かれている、Webを支える技術 -HTTP、URI、HTML、そしてREST (WEB+DB PRESS plus)ir?t=webcode06 22&l=am2&o=9&a=4774142042 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめがおすすめです。

多分、このぐらいの前提知識が無いと、「カスタマイズについて調べても理解できない」といった状況が起こりやすいのではないかと思われます。

特にWebやプログラミング周りは専門用語が多く、事前に専門用語については学んでおくのがおすすめです。

「Webを支える技術」はこちらir?t=webcode06 22&l=am2&o=9&a=4774142042 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

初めてのPHP、MySQL、JavaScript&CSS 第2版

q? encoding=UTF8&MarketPlace=JP&ASIN=4873116333&ServiceVersion=20070822&ID=AsinImage&WS=1&Format= SL160 &tag=webcode06 22 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめir?t=webcode06 22&l=am2&o=9&a=4873116333 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

続いて、こちらの初めてのPHP、MySQL、JavaScript&CSS 第2版ir?t=webcode06 22&l=am2&o=9&a=4873116333 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめは、PHPの基礎からデータベース連携、セキュリティなどを細かく説明してくれています。

WordPressというより、PHPからシステムを包括的に勉強したい人向けです。

最後には、アプリケーションを作るデモもあるので、一通りやれば大体の知見はつくかと思われます。

「初めてのPHP、MySQL、JavaScript&CSS 第2版」はこちらir?t=webcode06 22&l=am2&o=9&a=4873116333 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

初めてのJavaScript 第3版 ―ES2015以降の最新ウェブ開発

q? encoding=UTF8&MarketPlace=JP&ASIN=4873117836&ServiceVersion=20070822&ID=AsinImage&WS=1&Format= SL160 &tag=webcode06 22 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめir?t=webcode06 22&l=am2&o=9&a=4873117836 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

こちらの本はJavaScriptについて、ほとんどが網羅されています。最初のうちは、これを読んでおけば、基本的に全ての知識が入るかと思います。

ただしページ数が多いので、かなりやる気の有る人や、粘り強くやれる人におすすめの本です。

「初めてのJavaScript 第3版」はこちらir?t=webcode06 22&l=am2&o=9&a=4873117836 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

CSSシークレット ―47のテクニックでCSSを自在に操る

q? encoding=UTF8&MarketPlace=JP&ASIN=4873117666&ServiceVersion=20070822&ID=AsinImage&WS=1&Format= SL160 &tag=webcode06 22 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめir?t=webcode06 22&l=am2&o=9&a=4873117666 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ
こちらの本は、CSSの中級者向けのテクニックについて網羅されています。ハックを推奨するわけではないスタンスですが、ハックについても紹介されています。

中級者向けにしっかり書いてある本ですので、多少の基礎がわかる方にはとてもオススメの本です。

「CSSシークレット」はこちらir?t=webcode06 22&l=am2&o=9&a=4873117666 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

初心者はWordpressではどこをカスタマイズすべき?

WordPressではどこらへんをカスタマイズできるのでしょうか?

WordPress (ワードプレス) は、「オープンソースのブログ/CMS プラットフォーム」のため、根幹のシステムがあるはずです。

その機能が「ログイン機能」「DB(データベース)連携設定」「ユーザー管理機能」あたりにあったりします。

この辺のシステムを初心者の方がいじるのは少々危険ですので、初心者の方には、ここならいじっても比較的安全というファイルをお伝えします。

それは、「wp-content/themes」内にあるフォルダとファイルです。

初心者でもカスタマイズできるファイル

customize - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

ここのファイルであれば、編集しても基本的に大丈夫です。

と言いますのも、より正確な表現をすると、テーマファイルというのは「そのテーマ」のみに適応されるので、失敗しても他のテーマを選択したり、テーマを入れ直したりすれば元に戻るからです。

そのため、わざわざバックアップを取らなくても復元可能ということです。

もっと細かくそれぞれのファイルについて詳しく知りたい方は、こちらの記事(WordPressの仕組みを理解する)を参考にしてみてください。

WordPressの既存テーマ(twentyseventeen)をカスタマイズ

「wp-content/themes」の中のファイルのみを変更していくとなると、基本的には既存テーマをカスタマイズしていくことになります。

そこで、ここではカスタマイズしたい方法別に、どのファイルを編集すれば良いのか?を解説していこうと思います。

説明には、「twentyseventeen」のテーマを使います。

色や見栄えなど(CSS)を変更したい

まずは、色や見栄えなどのスタイルを変更したい場合です。

その場合は「style.css」(他のテーマだと同じような.cssがあるはずです)を編集します。

customize 1 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

言語はCSSで書かれていることが多いので、これを書き換えていきましょう。(CSSの知識が必要になります)

cuntom - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

こちらのスタイルシートを変更していくことで、見た目を変えることが出来ます。

こういったファイルの編集は、バックアップを取っていないと全て上書きされてしまうため注意が必要です。

ページの表示部分のシステムを変更したい

次は、ページの表示部分に関してです。これは「ヘッダーのメニューバーの位置」などを変更できるということです。

テーマごとにも異なるため、大枠を分かっていただければと思いますが、以下の表の様に機能しています。

customize1 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

上記の画像は、

  • page.php : 固定ページの表示フォーマット
  • footer.php : フッターの表示部分
  • front-page.php : フロントページの表示フォーマット
  • single.php : 投稿記事の表示フォーマット
  • archive.php : カテゴリー毎の投稿一覧
  • header.php : ヘッダーの表示部分

などのようになっています。

基本的にはphpファイルを編集していくことになるので、プログラミング言語的にはphpの知識が必要です。

ファイル名で予測できるものが多いですが、archive.phpのようにちょっと分かりにくいのもあります。

ページの処理部分を変更したい

次は、ページの処理部分です。これは、初心者のうちは気にしなくてもいいかと思います。

筆者がやっているカスタマイズは「ディスクリプションの自動挿入」です。テーマによっては、SNSでの拡散設定(OGP,Twitterカード)などをここで行っています。

これらの処理は面倒なことに”テーマ次第”でファイルの在り処が全然違います。

twentyseventeenでは3つのフォルダに分散されています。

customize3 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

※一例を挙げますが、「template-functions.php」を操作すると、テンプレートとして挿入されているHTMLタグの編集ができます。

これらのファイルになってくると、コードを読むのも大変なものも出てきます。

WordPressでのCSSのカスタマイズ方法

「見た目だけ少し変えれればいい!」という方のために、CSSのカスタマイズ方法をお伝えしておきます。

デベロッパーツールを使う

一つ目はデベロッパーツールを使ってしまう方法です。

この方法は、実際の表示を確認しながら編集ができるので、手間もかからずに早いので楽です。(筆者はよくやります)

まずは、編集したいページでデベロッパーツールを開きます。

デベロッパーツールの使い方が分からない方は「Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能」を御覧ください。

deve1 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

ここでCSSを変更していきます。CSSは右下のボックスで変更できます。

deve3 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

ここで編集したあと、「style.css?ver~~」のように書いてある文字をクリックすると、編集中のスタイルシートが表示されます。

これをコピーしてstyle.cssにペーストすれば完了です。

deve2 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめ

※style.cssは「ダッシュボード」→「外観」→「テーマの編集」から直接編集できます。

※キャッシュの関係で、すぐにはデザインが適用されないことがあります。その場合は、キャッシュの消し方を確認してください。

ローカル開発環境を使う

次は、ローカル開発環境を使う方法です。

とはいっても、実際にローカル開発環境でスタイルシートを編集し、アップロードするだけなのであまり流れは変わりません。

開発環境を立ち上げるのに莫大な時間を使うことになるかと思うので、こちらを参考にやってみてください。

Instant WordPressで超簡単にワードプレスローカル環境を構築する方法

WordPressのカスタマイズを依頼したら料金はどれくらい?

最後に、「もう、面倒なことは全て詳しい人に任せる!」といった方の為に、大体必要となる費用を調べてみました。

これらは一つの例ですが参考にしてみてください。

カスタム投稿機能 ¥10,000~¥50,000

カスタム投稿というのは、WordPressに標準でついている「投稿」「固定ページ」以外の投稿機能を実装する場合です。

LPやCTAなどの記事が追加されているテーマもありますが、そういったものです。

お問い合わせフォーム ¥5,000~¥30,000

お問い合わせフォームの説明はいらないと思います。これについては、プラグインが結構優秀なものもあるので、頑張れば自分で実装もできる気がします。

CMS機能追加 ¥100,000~

これは人に任せましょう。ECサイトちっくな運営をしたい時に、プログラミングが出来ない人でも操作・編集できるようにしたりする機能がこれです。

会員サイトや、比較検索機能などを付ける場合も、これくらいが相場になるでしょう。

WordPressのカスタマイズの方法のまとめ

以上、いかがでしたか?

WordPressのカスタマイズ方法について、ばっと纏めてみました。

筆者も普段からカスタマイズをしているので、HTML,CSS,JavaScript,PHPは扱えますが、初心者が調べながらやるには結構大変だと思います。

ですので、Wordpressのカスタマイズについてあまり時間をかけたくない!という方については、最初からStork0 - WordPressのカスタマイズでオススメ本4つと簡単なやり方まとめなどの有料テーマを使ってしまった方が、時間削減になるためおすすめです。

毎回毎回カスタマイズ方法を調べるよりも、最初からデザイン性やSEO対策などが施されたテーマを利用した方が、後々のメンテナンスなどが楽になるとは思われます。

Storkの公式サイトはこちら:https://open-cage.com/stork/

それでは最後まで読んでいただき、ありがとうございました。