【WEB初心者】WordPressテーマカスタイマイズに関する基本知識
こんにちは。
新しくWordPressを始めるときって「誰かが作った既成のテーマを購入するパターン」と「自分で作成するパターン」があると思います。
本記事では「CSSやPHPって何?」って段階の方に向けて、Wordpressテーマを自分でカスタマイズする際の基本知識について書いていきます。
【目次】
既成テーマと自作テーマそれぞれのメリット
既成テーマのメリット
まず既成テーマを入手して使うメリットとしては当たり前ですが手間が省けることです!
Wordpressでは有志の方が作成してくださったテーマが数多く公開されています。メディア作成支援としてはメジャーですのでiPhoneのケースが多いのと似たような現象になってます。
テーマによっては万単位で販売されているものも存在しますが、「WordPressテーマ 無料」あたりで検索して探せば初期費用を抑えることが可能です。
「これまでにブログなどを運営してなくてメディアを1から作ろうとしている」
「法人でやるのではなく個人で趣味やアフィリエイトでWordPressを始めたい」
特に個人がアフィリエイト目的で始める場合には、ただでさえ人的リソースについては企業のオウンドメディアと比べて不利になってしまいます。
ですので「初期投資の工数を削減して記事作成に専念する」「浮いた時間をPDCA回すのに充てる」ということが重要になってくるはずです。
自作のメリット
続いてテーマを自分でカスタマイズするメリットです。
自分でテーマをカスタマイズするメリットとしては「CSSやPHPなど、レイアウトカスタマイズに関する知識がつくこと」だと思います。
そもそも自分でカスタマイズしてテーマを作るといっても1から作る人は稀でしょう…笑
多くの人が「デフォルトテーマをカスタマイズする」もしくは「(作成者が許可している場合に)既成テーマをカスタマイズする」といった方法を採るのではないでしょうか。
レイアウトカスタマイズの基本知識を知っておくことによって「内容と親和性の高いテーマの作成」「ユーザビリティを考えたレイアウト変更」も出来るようになるのではないかと思います。
Localを使った環境設定とメリット
今回はLocalというソフトウェアをインストールして環境を整備します。
Localというのはその名の通りオフラインでWordPressサーバー環境を構築できるツールです。
個人的にこのツールを使うことには以下のメリットがあると思います。
・WordPress対応用のサーバーを申し込む必要がない。テーマをカスタマイズした後にサーバーを用意するという段取りが可能。
・バックアップと復元が簡単。ローカルコンピューターにテーマのファイルが保存されているので。
WordPressテーマファイルの構造
新規でWordPressページを作成し仮想サーバーを立ち上げてログインします。
ログインに成功したら早速ダッシュボード左のメニューから外観>テーマエディタに飛びましょう。
すると画面中央右側にテーマファイルの一覧が存在しますね。
デベロッパーツール(ページの検証)で変更箇所を探す
前項でページレイアウトを構成するファイルについて解説しました。
しかし編集するべきファイルとその箇所が分からなければレイアウトの変更はできませんよね?
そんなときに使うのがブラウザのデベロッパーツールと呼ばれるものです。デベロッパーとは”開発者”という意味でありWEB担当者がページを制作するときに使用されます。
今回はGoogleChtomeで説明させていただきます。
まずダッシュボードの左上表示された自分のサイト名をクリックして「サイトの表示」を行います。
すると新しいタブで実際のサイトが表示されるはずです。表示されているサイトの任意の場所で右クリックして「検証」を押します。
このように画面が2分割されて右側にソースが表示されるはずです。
ソースの任意の場所にマウスを置くとページ上で対応する箇所の色が変わると思います。
しかしソースから該当箇所を探すのは効率が悪いので、「ページ上のオブジェクト(要素)にオンマウスすることによって該当するソースを探す」といった方法を採りたいですよね。
デベロッパーツールは全て英語表記なので分かり辛いですが、「Element」の2つ左にあるアイコンをクリックして選択した状態にしましょう。
するとページ上にある変更したい要素にマウスを乗せることで対応するソースが自動的に選択されます。
例えば画像ではプロフィールや投稿日を含む大きな要素を選択してますが、この要素の名前が「entry-footer」だと分かります。
前項の話に戻りますが、例えば「entry-footerの位置を変えたい」というときはCSSを編集することになりますし、「entry-footerの内容を変更」したいというときはPHPファイルから変更箇所を探すことになります。