テーマを変える

2017年5月24日2017年6月5日

デフォルトのテーマはかっこいいんですが、ビジュアルが大きすぎてスクロールしないと投稿一覧が見えないので、テーマを変更します。

LIQUID PRESSを適用する

日本製のレスポンシブなテーマ、LIQUID PRESSを使ってみます。

/外観/テーマからインストールします。

新しいテーマで検索をすると、LIQUIDというのが出てくるのでこれをインストール、有効化します。

メインメニューが非表示になったので/外観/メニューで再度表示させます。

できました。結構見た目が変わりますね。

スマホサイトはこんな感じ。

ちなみにこのテーマ、ログインリンクが表示されないのでアドレスバーにwp-login.phpを入力してログイン画面を表示します。

Xeory Baseを適用する

最終的にはWordPressの公式にはない日本語テーマ、Xeory Baseをインストールしました。

公式テーマにはないので、WordPress内で検索しても出てきません。Xeoryのサイトでユーザー登録をしてダウンロードします。

管理画面でzipファイルをインストールしてもいいんですが、sftpあたりでサーバーにアップロードして~/www/junkworks/wp-content/themesの下にファイルを展開するとテーマの追加画面に現れます。

適用するとこんな感じ。たまたまアイキャッチ画像のない記事なので文字ばかりですが、設定されていれば表示されます。

子テーマを適用する

さて、いろいろ設定をいじっていきたいところですが、テーマがバージョンアップされると設定がクリアされてしまって、また一からカスタマイズすることになります。

これを回避するために子テーマを適用してこれをカスタマイズしていきましょう。

子テーマというのは、簡単に言うとオリジナルテーマに対する差分のみを上書きする機能です。

オリジナルテーマがバージョンアップしても上書きする差分は残っているので、カスタマイズの内容がそのまま引き継がれます。

$ cd ~/www/junkworks/wp-content/themes
$ mkdir xeory_base-child
$ cp xeory_base/style.css xeory_base-child/

コピーしたstyle.cssを次のように書き換えます。

/*
Theme Name: XeoryBase Child
Template: xeory_base

〜後略〜

• ２行目のTheme NameをXeoryBase childに書き換える
• ３行目のTemplate: xeory_baseを追記する

次にfunctions.phpを新規作成します。

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

※LIQUID PRESSの場合はLIQUID PRESSの公式サイトにある子テーマの作り方にあるものを記述します。（ちょっとだけ違う）

以上、親テーマへの参照設定ができたらWordPressのテーマをオリジナルから子テーマに切り替えます。

最後に使わないテーマは削除しておきましょう。