[無料WordPressテーマ] Simplicityのスタイルとクイックタグを他のテーマでも使おう！

WordPressテーマ

Simplicityのエディタでプルダウンメニューやクイックタグから適用出来るマーカー・ボックス・バッジなんかのスタイルってなにげに便利ですよね。他のテーマでもこれが使えると便利なんだけどなぁ…という事で、出来るだけ簡単な方法で何とかならないかとチャレンジしてみました。

当カスタマイズにおける注意点

作業に入る前に当カスタマイズの注意点を挙げておきます。

スタイルのプルダウンメニューが上書きされる

当エントリーの手順に従ってカスタマイズを適用させると、元々あったビジュアルエディタのスタイルは全て上書きされます。ちなみにスタイルのプルダウンメニューというのはこれの事ですよ？

Simplicityのスタイルプルダウンメニュー

クイックタグの並び順が変わる場合がある

クイックタグというのはこちらの事です。

Simplicityのスタイルクイックタグ

クイックタグに関しては追加になるようなので元のテーマにあったものも残りますが、priority（優先順位的な意味）というパラメータがあって、その数値次第で元のテーマのクイックタグと追加したクイックタグがごちゃ混ぜに並んでしまう可能性があります。

クイックタグを任意の順番に並べたい場合は、利用中のテーマのクイックタグを登録している部分を探して、追加するSimplicityのクイックタグと調整する必要があります。

スタイルのメニューが表示されている前提

表示する為の手段は問いませんが、デフォルトの設定ではスタイルのプルダウンメニューがエディタ上に表示されていないので、TinyMCE Advanceなどのプラグインを使って表示するのが無難でしょうか。

プラグインを有効化しただけで無く、設定を開いてメニューバーに追加する必要があります。一応フォーマットの中にサブメニューとしてスタイルはありますが、使い勝手がよくないのでスタイルだけのメニューを追加しておく事をオススメします。

テーマによっては巧く機能しない場合も

利用中のテーマによってはクイックタグが登録されないケースもありますのでその点はご了承を…基本的に同様の機能が全く無いテーマの方がコンフリクトというかバッティングしないので巧くいくのではないかと思います。

動作確認まで完璧にしたわけではありませんが、一応ちゃんと出来たかな？と思ったテーマはこちらになります。

  • Luxeritas
  • Sentry
  • Emanon Free（※クイックタグの順番が多少崩れます）
  • Xeory Base
  • Huemanなど

巧く追加出来なかったテーマは

  • STINGER PLUS2

STINGER PLUS2の場合は標準でクイックタグが色々とあるので、むしろそれ以上は追加しない方がよさそうな感じですが、元テーマのスタイルメニューが置き換わってしまう事の確認をした時にわかったので一応記載しておきます。

必要なファイルと作業手順

例によって前置きが長くなりましたが、それでは作業に必要なファイルの準備と作業手順に入りたいと思います。

Simplicityから必要なファイルをコピる

必要なファイルは2つあります。

Simplicity親テーマ
├ css
│　└ extension.css
└ lib
　　└ qtags.php
階層構造さえわかればいいと思って必要なファイル以外は書いてません。

アップロード前のzipファイルからでもサーバーにアップロード済のディレクトリからでも何でもいいので上記の2つのファイル（extension.cssとqtags.php）をコピってきて、利用したいテーマのフォルダにアップロードしましょう。読み込みは自分でパスを指定するので基本的にはどの階層でもOKです。

extension.css

プルダウンメニューやクイックタグから追加出来るボックスなどのスタイルは、Simplicity親テーマのstyle.cssを開いてもどこにも見当たりません。それもそのはずcssフォルダにあるextension.cssに全て記述されているからなんですね…これが。結果的にはそのおかげでstyle.cssの中から必要な部分だけ取り出す手間が省けて有り難かったわけで。

不要な部分を削って少しでもファイルを軽くしたいなら使わないスタイルは削除するべきですが、面倒だし別にいいやーという事であればそのまま使ってしまいましょう。

実はこのファイルの中にプルダウンメニューから選択出来ないスタイルなんかもあったりするので（試作段階だったのかな？）一度は目を通してみると面白いかもしれませんよ？

テーマにスタイルシートを読み込ませる

方法はいくつかあってどれが正解ってのは難しいところですが、そのテーマにあったベストだと思う方法を選択して下さい。

style.cssにコピペ

不要な部分を削除、またはまるっと全部を子テーマのstyle.cssにコピペするのが一番手っ取り早くて確実でしょうか。

head内に埋め込む

一般的な方法ですがWordPress的には面倒な気もしなくはないような。

head内でリンクを読み込ませる

<link rel="stylesheet" href="～絶対パスでも相対パスでも好きなように～/extension.css">

みたいな感じでいいんじゃないでしょうか？（適当）

functions.phpで読み込む

カスタマイズに慣れない内はあまりイジりたくないファイルですが、子テーマのfunctions.phpに以下を追記します。この例では子テーマのfunctions.phpと同じフォルダにextension.cssを配置した場合の書き方になります。

functions.phpでCSSを読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
        wp_enqueue_style( 'extension', get_stylesheet_directory_uri() . '/extension.css' );
}

もし、子テーマが上記のような方法で親テーマのstyle.cssを読み込んでいる場合は、まんまコピペするとエラーになるのでハイライトした行だけ親テーマのstyle.cssの次に追加して下さい。

既に同様の手順でCSSを読み込んでいた場合
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( 'extension', get_stylesheet_directory_uri() . '/extension.css' );
}

こんな感じで。

調整が必要かもしれない部分

Font Awesomeを使ったボックスのアイコン部分がテーマによって微妙にズレる場合があります。そんな時はextension.cssの以下の部分を修正して調整しましょう。

Font Awesomeのアイコンがズレるかもしれない部分
.information::before,
.question::before,
.alert::before{
  font-family: "FontAwesome";
  font-size: 50px;
  position: absolute;
  top: 20px;
  left: 13px;
  color: #EAE3B4;
}

こことそのすぐ下にある

Font Awesomeのアイコンがズレるかもしれない部分（モバイル用）
@media screen and (max-width:440px){
  .information,
  .question,
  .alert{
    padding: 10px 10px 10px 48px;
  }

  .information::before,
  .question::before,
  .alert::before{
    top: 10px;
    left: 10px;
    font-size: 32px;
  }
}
恐らくハイライト行だけの修正で済むと思いますが、実際にレスポンシブ表示を確認しながら必要に応じて他の部分も修正して下さいね？

qtags.php

CSSだけ追加してもタグは手書きじゃ意味が無いですからね、続いてスタイルのプルダウンメニューとクイックタグの追加手順になります。

こちらも使わないクイックタグを削除したりオリジナルのクイックタグを追加する事も出来ますが、クイックタグ関係の細かい話はまた別の機会にという事で、とりあえず今回はSimplicityからコピってきたファイルを読み込ませる事にしましょう。

functions.phpの一番下の行にでも以下のように追記します。

PHPファイルのインクルード

include 'qtags.php';

libというフォルダを作ってその中に配置した場合はこうなります。

フォルダを作ってその中に配置した場合

include 'lib/qtags.php';

もし、エディタ画面がおかしな事になったりしたら、追加した行を削除するか

何か問題があって読み込みを中止したい場合

//include 'qtags.php';

こんな風にコメントアウトしてやって下さい。

使いやすいようにカスタマイズしましょう

以上で作業は終了です、投稿画面を開けばスタイルとクイックタグが変わっているはずです…よね？

このカスタマイズのおかげでプラグインのAddQuicktagをインストールしなくて良くなっただけでも私としてはメリットがありましたが、「Simplicityから他のテーマに変更した、またはしようと思っているがこの機能は引き続き利用したい」という方や、「現在は他のテーマを利用しているが、Simplicityを使ったサイトでよく見かけるマーカーやボックスなどを使ってみたい」と思っていた方はよろしければダメ元でお試しを。

不具合がありましたらお手数ですがご連絡を

当サイトでも実際にこのカスタマイズ方法を使ってSimplicityのスタイルとクイックタグ＋α（オリジナルのスタイル）をLuxeritasに移植して利用していますが、今のところこれと言って問題は出てませんので、大丈夫なんじゃないかなーと思っています、たぶん。

とは言え、私が気付いてないだけの可能性は多々ありますので、何か不具合が見つかりましたらお手数ですが当エントリーのコメント欄かコンタクトフォームの方からご報告いただけると幸いです。対応方法までは思いつかなくても注意喚起として追記させていただきたいと思いますので。

WordPressテーマHTML,CSS,PHP,Simplicity