WordPress Hestia テーマのカスタマイズ・インストール～背景画像の設定（その１）

Hestia（テーマ）について

WordPressには様々なテーマをインストールする事ができる。

このブログはHuemanを使っているが以前にWindows PC内にVM環境のUbuntu Server 16.04を用意したので、折角なのでWordPressをインストールして違うテーマを試してみることにした。

選んだのはhestia。

人気で検索したら上位に来ていたのと、星評価が高くて企業サイトや映像サイトECサイト、ブログ、ニュースサイトに適しているとの説明文もあったので「じゃぁ試してみるか」程度の理由であまり色々なテーマを比較したわけではない。

インストール＆有効化

まずはインストール＆有効化

有効化

インストール終了後の「はじめに」の画面。

「おすすめ設定」タブに２と赤丸で表示されていたのでとりあえずクリックする。

以下の２つのプラグインがおすすめ設定ということなので「インストールと有効化」を行った。

子テーマの作成

Hestiaのstyle.cssを直接編集するとテーマがバージョンアップされた時に編集した内容が飛んでしまう事がある。

今回はVM環境に試行錯誤的な意味合いでインストールしていて継続して使い続ける訳では無いのでそれほど気にする必要は無いのだけれども、一応子テーマを作成する事にした。

子テーマ用のディレクトリーの作成

親のテーマ名＋”-child”のディレクトリーを作成する。

cd /var/www/wordpress/wp-content/themes
sudo mkdir hestia-child

style.css

子テーマのディレクトリー内にstyle.cssファイルを作成する。

cd hestia-child
sudo vim style.css

/*
Theme Name: hestia Child
Theme URI: http://example.com/
Description: hestia Child Theme
Author: souichirou
Author URI: http://example.com
Template: hestia
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: hestia-child
*/

functions.php

子テーマのディレクトリー内にfunctions.phpファイルを作成する。

sudo vim 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')
);
}
?>

所有者の変更

所有者をwww-data（ubuntuの場合、www-dataがapache等のWEBサーバーを操作するデフォルトのユーザとグループ）に変更する。

cd ..
sudo chown -R www-data:www-data hestia-child

hestia-childを有効にする

WordPressのメニューより外観ー＞テーマでインストール済みのテーマ一覧を呼び出すとhestia childが表示されているので「有効化」をクリックする。

Hestiaの子テーマが有効化された。

ページ構成

Hestiaの初期状態のページ構成は以下の様になっている。

フロントページ（ホームページ）が複数のセクションに分かれていて※フロントページのブログセクションからブログページに遷移する構造。

フロントページ（ホームページ）とブログページ（投稿ページ）が分かれていて、フロントページに様々なセクション（私たちについて、お客様の声、メンバーの紹介、買い物かご、etc）が表示できるのがHestiaの大きな特徴だと思う。

セクションの設定によって企業のコーポレートサイトやECサイト、ブログサイトなど目的にあった設定が可能になるので人気の上位に来ていたのかも知れない。

※下の図のセクションは一例。もっと沢山のセクションに分かれており、それぞれ表示／非表示を切り替えることができる。

カスタマイズ

WordPressのメニューより外観ー＞カスタマイズでテーマのカスタマイズを行う。

この記事では「PROバージョンの機能」から「外観設定」までを扱う。

PROバージョンの機能

有料のPROバージョンとの違いの一覧。

カスタマイズ可能な配色やセクションの並べ替えなど魅力的な機能アップがあるけど、まずは無料バージョンの機能を試してみることにする。

ちなみに有料版は１年間のアップデートとサポートで７５＄だった。

サイト基本情報

ロゴやタイトルなどサイトの基本的な情報を設定する。

外観設定、一般設定

基本的なレイアウトを設定する。

ページサイドバーレイアウト

フロントページの時のサイドバーの位置、だと思うのだけれどもフロントページにサイドバーを表示するする指定が（あるのかも知れないけど）見当たらない。

ブログページの方はサイドバーのウィジェットを指定する事ができるので、こちらは”なし”を選択した。

ブログサイドバーレイアウト

ブログの時のサイドバーの位置

シェアアイコンを有効化

閲覧者がブログの記事をシェアする為のSNSのシェアアイコンを表示するかどうか

有効化すると記事の右下にSNSのシェアアイコンが表示される。

有効化しないと表示されない。

先頭へ戻る機能を使用

チェックをするとページを下にスクロールした時に右下に先頭に戻る為のボタンが自動的に表示されるようになる。

ボックスレイアウト

ボックスレウアウト有効化

ボックスレウアウト無効化の場合

タイポグラフィ

フォントの設定を行う。

見出しと本文と別々にフォントの指定をする。

フォントファミリー

フォントサイズ

各項目ごとに細かくフォントサイズの指定が可能。

デフォルトに対して＋、ーでフォントサイズを指定する。

投稿とページ

ブログページのフォントサイズを指定する。

タイトル
見出し
コンテンツ

フロントページセクション

フロントページのフォントサイズを指定する。

背景画像

フロントページやブログページの背景の画像を指定する。

基本的に背景は無地が良いと思うが、試しに背景画像（白いタイル柄）を設定してみた。

ヘッダー背景

背景画像の「ヘッダー背景」ボタンを押すとヘッダーオプションー＞ヘッダー設定へ飛ぶ。

こちらの設定については別記事で後述する。

「フロントページセクション」以降の設定については次の記事に続く