ENGINEER BLOG

ENGINEER BLOG

WordPressのテーマをカスタマイズする

2019.09.17

こんにちは。ソリューションサービス第4の石出です。
今までは基幹システムの開発業務に携わっていて、Web開発はしていませんでしたが、(8月にweb系のチームに異動となりました)
趣味でロリポップでVPS借りてWordPressつかってみてます。
ブログのテーマいじってみたいな～と思ったのですが、
VPS上でやるとごちゃごちゃしちゃうので
ローカルで環境を作って、テーマをカスタマイズしてみたいと思います。

WordPressについて

WordPressとはどのようなものなのか簡単に紹介します。
WordPressはCMS（コンテンツマネジメントシステム）の一種です。
CMSとはテキスト、画像などのコンテンツを管理して、webページとして表示させるシステムのことです。
web技術の統計データを提供しいている「w3techs.com」によると、世界中のwebサイトの34.5%（2019/08/20現在）がWordPressを使っているそうです。
管理画面でブラウザ上から簡単にwebページを管理することができるのが特徴です。
具体的には、ブログ、コーポレートサイト、お店のサイト、などなど、様々な用途のwebサイトを簡単に作成し、管理することができます。
ローカル環境に作成することによって何ができるかというと、開発中に変更を加えた部分を簡単にプレビューとして表示させることができます。
また、サーバーを借りる必要が無いため、無料で気軽に使ってみることができます。
レンタルサーバーを借りてドメインを取得し、作成したファイルをアップロードすればインターネットで公開することもできます。

構築手順

レンタルサーバーを借りていれば簡単にインストールできるサービスがよくあるのですが、
今回は無料でいじれる様にローカル環境にインストールしてみました。

今回はXAMPPを使ってサーバーを立ち上げ、そこでWordPressを動かします。
まずはXAMPPをインストールしてApacheとMySQLを起動します。
尚、XAMPPのインストール方法については割愛します。

XAMPPは下記リンクからインストールできます。
https://www.apachefriends.org/jp/index.html

①データベースを作成する

まずは、データベースの作成を行います。
WordPressではデータベースを使ってコンテンツの管理を行っているためです。
XAMPPの管理ツールからMySQLのAdminを押下します。

image11

phpMyAdminという管理画面からデータベースを作成します。
ここでは、データベースの情報として、データベース名 と 文字コードを設定します。

データベース名は任意の英数字を入力 、文字コードは「utf8_general_ci」を選択し、作成ボタンを押下します。

image1

②WordPressをインストールする

WordPress日本語公式サイトにアクセスします。
「WordPressをダウンロード」ボタンを押下してzipファイルをダウンロードします。

image2

zipファイルを解凍し、「WordPress」という名前のフォルダをフォルダごとコピーして「 C:\xampp\htdocs 」直下に貼り付けます。

image3

③WordPressの設定を行う

ここからはWordPressの設定を行っていきます。
まずはトップページにアクセスします。
アドレスは「 http://localhost/WordPress/ 」となります。
トップページの「さぁ、始めましょう」ボタンを押下すると、データベース情報を入力する画面に遷移します。
ここでは、先ほど作成したデータベースに接続するための情報を入力します。

image4

入力内容については下記を参考にしてください。

  • データベース名
    phpMyAdminで入力したデータベース名

  • ユーザー名
    変更していなければ「root」と入力

  • パスワード
    変更していなければブランクのまま

  • データベースのホスト名
    今回は「loacalhost」

  • テーブル接頭辞
    デフォルトのままで問題ありません

続いて、サイトのタイトルなど、作成するサイトの情報を入力します。
ユーザー名とパスワードは管理画面にログインするために使用する任意の値を入力します。
入力が完了したら「WordPressをインストール」ボタンを押下します。

image6

インストールが完了したらログイン画面が表示されるので、設定したユーザー名とパスワードを入力します。
ログインするとWordPressの管理画面が表示されます。

imagea

プレビューとしてサイトを表示してみると、初期設定としてこんな感じになっていました。

image7

これで、インストール作業は完了です。

※インストールの手順について詳しく知りたい方は公式サイトを参考にしてください。
Installing WordPress « WordPress Codex

テーマのカスタマイズについて

WordPressにはカスタマイズ機能が多数備わっています。
例えば、"プラグイン"といって様々な追加機能を搭載できたり、"テーマ"というサイトのテンプレートが選べたり、機能は多岐にわたります。
もちろん、HTML、CSSを書いてwebページを表現することもできます。
是非色々試してみると面白いと思います。

子テーマの作成

今回はテーマのカスタマイズとして、"子テーマ"の作成を行いました。
子テーマとは、元々存在するテーマ（親テーマ）に上書きする形でカスタマイズを行うために作成するテーマです。

テーマが格納されているフォルダに子テーマとして新しいフォルダを作成します。

imageb

  • style.cssの作成
    作成した子テーマのフォルダにstyle.cssを作成します。
    各項目は子テーマの情報に合わせて記載します。
    今回はtwentyseventeenというテーマの子テーマを作成しているいため、下記のように記載しました。
    子テーマの名前としてTwenty Seventeen Child、
    親テーマの名前としてtwentyseventeenとなっています。
/*
 Theme Name:    Twenty Seventeen Child
 Theme URI:     http://example.com/twentyseventeen-child/
 Description:   Twenty Seventeen Child Theme
 Author:        John Doe
 Author URI:    http://example.com
 Template:      twentyseventeen
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
 Tags:          light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:   twentyseventeen-child
*/
  • functions.phpの作成
    style.css同様に、子テーマのフォルダにfunctions.phpを作成します。
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri(). '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array('parent-style'));
}
?>

子テーマのCSSファイルを編集する

サイトタイトルの色を変更する

子テーマのCSSファイルを編集することでサイトをカスタマイズすることができます。
今回は子テーマのCSSが反映されていることを確認するためにサイトのタイトルの色を変更してみます。

image15
このように、デフォルトの状態ではサイト名は白になっています。

まずは、Chromeの検証ツールを使ってサイトのタイトルにどんなセレクタが適用されているかを確認しました。 セレクタとは、色などの指定をどこに適用するかを決めるものです。今回は文字の色を指定するのに使います。

image9

デベロッパーツールでは確認した要素の上にポインタをのせることで、その要素にどのようなスタイルが適用されているのかを確認することができます。　　
続いて、CSSを編集します。
CSSではセレクタ {プロパティ名:値;}という形で記述します。
今回はセレクタ＝サイト名、プロパティ名＝color（色）、値＝red（赤）としました。

body.has-header-image .site-title,
body.has-header-video .site-title,
body.has-header-image .site-title a,
body.has-header-video .site-title a{color:red;}

CSSを編集した結果、下記のようにサイト名の色を赤にすることができました。

image10

投稿タイトルを太字に変更する

続いて、記事のタイトル名を太字にします。
まず、太字にする前のタイトル名はこのようになっています。　　
image16

まずは先ほどと同様に検証ツールを用いて投稿タイトルのCSSを確認すると、下図のようになっています。

.entry-title a {
    color: #333;
    text-decoration: none;
    margin-left:
}

続いて、太字にするために子テーマのCSSファイルを編集します。
フォントの太さを指定するためのプロパティはfont-weightプロパティです。
値は数値で、100,200,…と指定するか、キーワードで指定します。
今回はキーワードでboldと指定することで太字にしてみます。

.entry-title a{font-weight:bold;}

結果、このような形で投稿タイトル名を太字にすることができました。
「エンジニアブログを書きました」と記載されたタイトル名が太字で表示されています。
image17

おわりに

簡単にですがテーマの開発の部分もご紹介させていただきました。

以上、お読みいただきありがとうございます。

今後も業務と直接関係のない分野でも様々な技術やサービスに触れて行きたいと思います。

TOPに戻る