
こんにちは。ソリューションサービス第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を押下します。
phpMyAdminという管理画面からデータベースを作成します。
ここでは、データベースの情報として、データベース名 と 文字コードを設定します。
データベース名は任意の英数字を入力 、文字コードは「utf8_general_ci」を選択し、作成ボタンを押下します。
②WordPressをインストールする
WordPress日本語公式サイトにアクセスします。
「WordPressをダウンロード」ボタンを押下してzipファイルをダウンロードします。
zipファイルを解凍し、「WordPress」という名前のフォルダをフォルダごとコピーして「 C:\xampp\htdocs 」直下に貼り付けます。
③WordPressの設定を行う
ここからはWordPressの設定を行っていきます。
まずはトップページにアクセスします。
アドレスは「 http://localhost/WordPress/ 」となります。
トップページの「さぁ、始めましょう」ボタンを押下すると、データベース情報を入力する画面に遷移します。
ここでは、先ほど作成したデータベースに接続するための情報を入力します。
入力内容については下記を参考にしてください。
-
データベース名
phpMyAdminで入力したデータベース名 -
ユーザー名
変更していなければ「root」と入力 -
パスワード
変更していなければブランクのまま -
データベースのホスト名
今回は「loacalhost」 -
テーブル接頭辞
デフォルトのままで問題ありません
続いて、サイトのタイトルなど、作成するサイトの情報を入力します。
ユーザー名とパスワードは管理画面にログインするために使用する任意の値を入力します。
入力が完了したら「WordPressをインストール」ボタンを押下します。
インストールが完了したらログイン画面が表示されるので、設定したユーザー名とパスワードを入力します。
ログインするとWordPressの管理画面が表示されます。
プレビューとしてサイトを表示してみると、初期設定としてこんな感じになっていました。
これで、インストール作業は完了です。
※インストールの手順について詳しく知りたい方は公式サイトを参考にしてください。
Installing WordPress « WordPress Codex
テーマのカスタマイズについて
WordPressにはカスタマイズ機能が多数備わっています。
例えば、"プラグイン"といって様々な追加機能を搭載できたり、"テーマ"というサイトのテンプレートが選べたり、機能は多岐にわたります。
もちろん、HTML、CSSを書いてwebページを表現することもできます。
是非色々試してみると面白いと思います。
子テーマの作成
今回はテーマのカスタマイズとして、"子テーマ"の作成を行いました。
子テーマとは、元々存在するテーマ(親テーマ)に上書きする形でカスタマイズを行うために作成するテーマです。
テーマが格納されているフォルダに子テーマとして新しいフォルダを作成します。
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が反映されていることを確認するためにサイトのタイトルの色を変更してみます。
このように、デフォルトの状態ではサイト名は白になっています。
まずは、Chromeの検証ツールを使ってサイトのタイトルにどんなセレクタが適用されているかを確認しました。 セレクタとは、色などの指定をどこに適用するかを決めるものです。今回は文字の色を指定するのに使います。
デベロッパーツールでは確認した要素の上にポインタをのせることで、その要素にどのようなスタイルが適用されているのかを確認することができます。
続いて、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を編集した結果、下記のようにサイト名の色を赤にすることができました。
投稿タイトルを太字に変更する
続いて、記事のタイトル名を太字にします。
まず、太字にする前のタイトル名はこのようになっています。
まずは先ほどと同様に検証ツールを用いて投稿タイトルのCSSを確認すると、下図のようになっています。
.entry-title a {
color: #333;
text-decoration: none;
margin-left:
}
続いて、太字にするために子テーマのCSSファイルを編集します。
フォントの太さを指定するためのプロパティはfont-weight
プロパティです。
値は数値で、100,200,…と指定するか、キーワードで指定します。
今回はキーワードでbold
と指定することで太字にしてみます。
.entry-title a{font-weight:bold;}
結果、このような形で投稿タイトル名を太字にすることができました。
「エンジニアブログを書きました」と記載されたタイトル名が太字で表示されています。
おわりに
簡単にですがテーマの開発の部分もご紹介させていただきました。
以上、お読みいただきありがとうございます。
今後も業務と直接関係のない分野でも様々な技術やサービスに触れて行きたいと思います。