AddQuicktagはあらかじめ登録しておくことで、定型文やHTMLタグを本文中に出力できる便利なWordPressのプラグインです。
WordPressのビジュアルエディタ上で装飾を反映させてると確認する手間や、表示がおかしいときすぐに変更できて便利だし見やすいので、ビジュアルエディタに反映させる方法をご紹介します。
※WordPressプラグインAddQuicktagの設定方法と使い方はコチラでご確認くださいね。
※ビジュアルエディターのスタイルシート (editor-style.css)が管理画面に導入されてるのが前提。カスタマイズで導入も可能ですが割愛します。
普段使っている装飾を、WordPressエディタ反映させる
WordPressのダッシュボード内、外観より、テーマの編集で、スタイルシートがありますよね。そのCSSをコピーしてください。
普段使っているスタイルから、ブログの表示に関係あるスタイルのみ抽出してTeraPadやWindows備え付けのメモ帳などにペーストします。これで下準備OK！
※親テーマのCSSからも導入する場合は、サイドバーやヘッダー・フッター・ナビなどのスタイルは不要
ローカルのエディタを一括置換する
WordPressビジュアルエディターには、テーマ側でマークアップしているHTMLタグがあると反映しません。テーマ限定のタグのみを削除するため、TeraPadなどテキストエディタをつかって、一括でタグを削除させましょう。
例えばSimplicityを使っていれば、.entry-content hoge。.entry-content 半角スペースこの部分が不要なので、削除してhogeするわけです。
.entry-content h2でしたらh2のように全て置換するなどして変更
.article h3でしたらh3に全て変更
WordPressのビジュアルエディタにはentry-contentやarticleというHTMLタグ内に属性がついてないから、すべて抜くと反映される。と言えばわかりやすいですね。
全て削除できたら、そのCSSをコピーして、ビジュアルエディターのスタイルシート (editor-style.css)に貼りつければ完成です！
カスタマイズ前後の装飾例をみればこんな感じ。
このように反映されます。hタグの装飾は必要ないなら、装飾を削除して最小限のスタイルを反映させるだけで、十分見やすくなりますよね＾＾
テキストエディタでタグを確認・編集したいけど、文字が小さいときの対処
アドクイックタグを使っていて、HTMLタグを編集したり確認するときテキストエディタが異様に見にくい！と感じませんか？
スマホビューならミスタップしちゃう＞＜。。など。
そんなとき、ちょっと見やすくカスタマイズする方法も一応ですがあるんですよっ。CSSを強引にツッコめば見やすくなるって知ってました？
LINKWordPress投稿のテキスト画面が、超見やすいCSSカスタマイズ！スマホ・タブレットでミスタップを防ぐコード
FTPソフトやサーバーのFTPを直接編集できるなら、超簡単に変更できますよ。WordPressを更新すれば消えますが、毎日見にくい画面と格闘せずに済ませたいなら、一度ためしてくださいね。
さいごに
WordPressの管理画面を少し見やすく変えるだけで、一気に使い勝手がよくなるのでカスタマイズ頑張ってください。
それでは、かうたっくでした＾＾
Comments