Self-Curation

新卒社会人で営業マンになりました

【WEB初心者】WordPressテーマカスタイマイズに関する基本知識

f:id:scuration:20200504194651p:plain

こんにちは。

新しくWordPressを始めるときって「誰かが作った既成のテーマを購入するパターン」と「自分で作成するパターン」があると思います。

本記事では「CSSPHPって何?」って段階の方に向けて、Wordpressテーマを自分でカスタマイズする際の基本知識について書いていきます。



【目次】

既成テーマと自作テーマそれぞれのメリット

既成テーマのメリット

まず既成テーマを入手して使うメリットとしては当たり前ですが手間が省けることです!

Wordpressでは有志の方が作成してくださったテーマが数多く公開されています。メディア作成支援としてはメジャーですのでiPhoneのケースが多いのと似たような現象になってます。

テーマによっては万単位で販売されているものも存在しますが、「WordPressテーマ 無料」あたりで検索して探せば初期費用を抑えることが可能です。

「これまでにブログなどを運営してなくてメディアを1から作ろうとしている」
「法人でやるのではなく個人で趣味やアフィリエイトWordPressを始めたい」

特に個人がアフィリエイト目的で始める場合には、ただでさえ人的リソースについては企業のオウンドメディアと比べて不利になってしまいます。

ですので「初期投資の工数を削減して記事作成に専念する」「浮いた時間をPDCA回すのに充てる」ということが重要になってくるはずです。


自作のメリット

続いてテーマを自分でカスタマイズするメリットです。

自分でテーマをカスタマイズするメリットとしては「CSSPHPなど、レイアウトカスタマイズに関する知識がつくこと」だと思います。

そもそも自分でカスタマイズしてテーマを作るといっても1から作る人は稀でしょう…笑

多くの人が「デフォルトテーマをカスタマイズする」もしくは「(作成者が許可している場合に)既成テーマをカスタマイズする」といった方法を採るのではないでしょうか。

レイアウトカスタマイズの基本知識を知っておくことによって「内容と親和性の高いテーマの作成」「ユーザビリティを考えたレイアウト変更」も出来るようになるのではないかと思います。


Localを使った環境設定とメリット

f:id:scuration:20200504194909p:plain

今回はLocalというソフトウェアをインストールして環境を整備します。

Localというのはその名の通りオフラインでWordPressサーバー環境を構築できるツールです。

個人的にこのツールを使うことには以下のメリットがあると思います。

WordPress対応用のサーバーを申し込む必要がない。テーマをカスタマイズした後にサーバーを用意するという段取りが可能。

・バックアップと復元が簡単。ローカルコンピューターにテーマのファイルが保存されているので。


Local | The #1 local WordPress development tool

ダウンロードはこちらのデベロッパーページから。WIndwosとMacの両方に対応しております。


WordPressテーマファイルの構造

f:id:scuration:20200504195308p:plain

新規でWordPressページを作成し仮想サーバーを立ち上げてログインします。

ログインに成功したら早速ダッシュボード左のメニューから外観>テーマエディタに飛びましょう。

すると画面中央右側にテーマファイルの一覧が存在しますね。

まずテーマファイルはその役割から考えて「style.css」と「〇〇.php」の2つに大別されます。


Style.css

「Style.CSS」というのは主に外観やレイアウトをどのように制御するか記述したものです。

この”スタイルシート”と呼ばれるものを用意する方法は「別途作成したCSSファイルを読み込む」「Styleタグを使ってHTMLに直接記述する」といったパターンがあります。

WordPressは「Style.CSS」というファイルからレイアウト情報を読み込んでおり、1つのCSSファイルを編集すれば全てのページに変更を適応できるメリットがあります。

とりあえず「ページレイアウトを変更するときはCSSの編集する」ということを覚えておきましょう。


〇〇.php

拡張子がphpのテンプレートファイルも存在します。

プログラミング言語PHPの存在を知っている方もいるのではないでしょうか。

僕もRubyをちょっと触ってPHPと近いという認識を持っているのですが、要は「ユーザーからリクエストがあったときにそれに沿ったファイルを表示する」という仕組みです。

例えば「ユーザーがカテゴリページを開いてアーカイブ一覧を開いた」といったときには、アーカイブ一覧のページを構成する要素をリクエストして「archive.php」「footer.php」「header.php」といったものを返して表示します。


デベロッパーツール(ページの検証)で変更箇所を探す

前項でページレイアウトを構成するファイルについて解説しました。

しかし編集するべきファイルとその箇所が分からなければレイアウトの変更はできませんよね?

そんなときに使うのがブラウザのデベロッパーツールと呼ばれるものです。デベロッパーとは”開発者”という意味でありWEB担当者がページを制作するときに使用されます。

今回はGoogleChtomeで説明させていただきます。

まずダッシュボードの左上表示された自分のサイト名をクリックして「サイトの表示」を行います。

すると新しいタブで実際のサイトが表示されるはずです。表示されているサイトの任意の場所で右クリックして「検証」を押します。

f:id:scuration:20200504193416p:plain

このように画面が2分割されて右側にソースが表示されるはずです。

ソースの任意の場所にマウスを置くとページ上で対応する箇所の色が変わると思います。

しかしソースから該当箇所を探すのは効率が悪いので、「ページ上のオブジェクト(要素)にオンマウスすることによって該当するソースを探す」といった方法を採りたいですよね。

f:id:scuration:20200504193231p:plain

デベロッパーツールは全て英語表記なので分かり辛いですが、「Element」の2つ左にあるアイコンをクリックして選択した状態にしましょう。

f:id:scuration:20200504194108p:plain

するとページ上にある変更したい要素にマウスを乗せることで対応するソースが自動的に選択されます。

例えば画像ではプロフィールや投稿日を含む大きな要素を選択してますが、この要素の名前が「entry-footer」だと分かります。

前項の話に戻りますが、例えば「entry-footerの位置を変えたい」というときはCSSを編集することになりますし、「entry-footerの内容を変更」したいというときはPHPファイルから変更箇所を探すことになります。