WordPressのテキストエディターでクイックタグボタンのカスタマイズ ボタンの追加と色付け Simplicity2編

WordPressのテキストエディターでクイックタグボタンのカスタマイズ ボタンの追加と色付け Simplicity2編

2017-12-14
日記帳

WordPressのテキストエディターでクイックタグボタンのカスタマイズ ボタンの追加と色付け Simplicity2編

みなさん、Wordpressはビジュアルエディター派ですか?テキストエディター派ですか?

普通のブロガーだったりすると大体ビジュアルエディターでの編集が多く僕も元々はビジュアルエディター派でカスタマイズを施していました。
しかしながら、ビジュアルエディターとプレビューの表示の違いがおかしかったり、はたまた自動修正機能で表示がめちゃめちゃだったりしてくるので、Wordpressに慣れてくるとビジュアルエディターに嫌気がさしてくるものです。

こうしていくと、ビジュアルエディターを使いやすくカスタマイズするのかテキストエディターに変更するのかということになってくるのですが、やっぱりテキストエディターのほうが癖もなくそのまま記述できるので楽なのです。

そこで今回はテキストエディターにてWordpressをWEBから編集する際にクイックタグを使えるように、そしてボタンのデザインを見やすく使いやすくするためのカスタマイズを紹介します。

多分、テキストエディターを活用する人ってタグも自分で全部打てる人だと思うので、今回のカスタマイズは打つのが面倒だったり好みのタグをボタンで追加するカスタマイズなので需要があるようなないような感じで(笑
独自タグとかショートコードに流用してもよさそうですね。

使用環境
* WordPressをブラウザで使っている人
* Simplicityを使っている人(使ってなくても一部流用可能)

カスタマイズの方法

AddQuickTagを使わずfunction.phpを編集します。

Simplicityを使っているときにfunction.phpに記述しても動かなかったのでfunction.phpにはボタンのデザインについて記述、
標準ボタンの削除を記述しボタンの追加については
simplicity2/lib/qtags.php
を編集しました。

デフォルトのクイックボタン削除

削除したいボタンのIDをここにカンマ区切りで記入します。
$qtInit['buttons'] = 'ここに削除しないIDを記述 ';

クイックタグを自分好みに追加する

ファイルの位置:Simplicity2: Editing simplicity2/lib/qtags.php

WordPressの標準クイックタグのコードも好きじゃないのでついでにボタン全部書き換えました。
strongやemなどはMarkdownに書き換え。<b>などでもよかったのですが、使ってみてどっちにするかは決めようと思います。
また使わないボタンもあるのでコンパクトに。ボタンの文字数も調節して見やすくカスタマイズを施します。
あとは、HタグとSimplicityの拡張クラスを配置、見た目はかなり使いやすくなったと思います。
不要なところは// でコメントアウトしてます。

ボタンの文字とかは短くするのに名前を変更しています。
また、自分で追加したタグのIDはほぼ適当です(笑
そして次にボタンを色分けとかして見やすくするCSSを書きます。

追加するのは子テーマのfunction.phpに書き込みます。

クイックタグのボタン色変更

CSSの記述で書くとその通りになるので自由に変更できます。
これでWEBからの投稿編集も楽しく書ける!

といいな(笑)