WordPressテーマSimplicity2で作る超簡単オリジナルテーマ

Simplicity2というWordPressテーマを利用して、本サイトのデザインをリニューアルしてみた。久しぶりのリニューアルだったので、以下。カスタマイズの手順などを簡単にメモした。

先ずは、Simplicity2の公式サイトに行って、次の3つをダウンロードする。

  • Simplicity2本体
  • Simplicity2の子テーマ
  • スキンテンプレート

Simplicity2本体と子テーマは、管理画面のサイドメニューから外観→テーマに行き、新規追加→「テーマのアップロード」ホタンをクリックすることにより、インストールできる。

実際のカスタマイズは子テーマ内のファイルを編集することになる

なお、Simplicity2はスキンを切り替えることで、スタイルを変更することができる。既存のスキンに手を加えて、カスタマイズすることも可能だし、子テーマ内のskinフォルダにあるskin-templateなどを活用してゼロからスキン作ることも可能だ。

スキンフォルダ内のstyle.cssファイルの先頭には、次の内容を最低限記述しておくことが必要だ。Priorityとはスキン選択の際の並び順のこと。

 /*
  Name: HOGE HOGE
  Priority: 100
  Author: HOGE
  Author URI: http://hoge.com/
*/

これまで、Highwindというテーマを親テーマとして次のようなテーマを使っていた。

今回は、上記のヘッダーのイメージを踏襲したいので、ナビメニューをヘッダーの上に移動することから始める。

Simplicity2本体内のheader.phpファイルを子テーマフォルダにコピーし、このファイルをテキストエディタで開いた後、以下の3行(71行から73行あたり)をカットしてheaderタブの上(41行あたり)に貼り付ける。

<?php if (is_navi_visible())://ナビゲーションが表示のとき
  get_template_part('navi');//グローバルナビのためのテンプレート
endif; ?>

ナビメニューの背景色や高さ等は、子テーマ又はスキンのstyle.cssへの記述によって変更することになるが、ヘッダーの高さや背景色の変更は、管理画面のテーマカスタマイズで行うことも可能だ。また、記事変更日の表示、非表示もテーマカスタマイズから行える。

ということで、超特急カスタマイズの結果は次のとおり。

スキンはsimple-blackを改良したものを使用した。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク