WP管理・投稿画面カスタマイズ~『p』『h2』みたいなタグ・定型文をボタン1つで記事に追加したい
こんにちは、管理人@SS_mshpです。
今回は、以前サイト制作のお取引先さまと話した、WPの記事を投稿するときに、少し生産性が上がりそうな話題です。
『p(paragraph・段落)』『h2(見出し、h3とかh4も)』みたいなタグ・『定型文』を、手打ちじゃなくてボタンで入るようにしたいという内容ですが、どのようにすれば良いのでしょうか?さっそくカスタマイズ内容を確認していきましょう。
目次
確認~ブロックエディタの場合・クラシックエディタの場合で、クイックタグ入力できるものは何があるか?
WP投稿画面でhtmlタグをボタン押すだけで入力する機能は、『クイックタグ』と言うらしいです(最近知りました笑)。これは、エディタによっても使い勝手が変わってきそうなので、ブロック・クラシックエディタの場合、それぞれみてみましょう。
ブロックエディタの場合
冒頭で『p』『h2』みたいなタグと書きましたが、ブロックの場合は、基本的なタグは、対応するブロックを使えば大丈夫です。
例えば、h2みたいな見出しを記事に入れたいときは、『見出しブロック』を使用するとか・・
pタグにしたい場合は、『段落ブロック』を使用するなど、タグに応じてブロックが用意されているものがあります。
クラシックエディタの場合
管理人のクラシックエディタ使用時の投稿画面です。クイックタグで入力できるものには、基本的なタグ『strong/link/img/リストなど』はあります。しかし『p』『h2』などはないので、手打ちする・コピペする・クイックタグに追加するなどの手段をとります。
もちろん、『p class="○○○"』みたいに、独自のクラスをつけて、別々のCSSを適応させたい&独自クラス付きタグをボタンで入れたい、というのも対応できそうです。
投稿画面で『p』『h2』みたいなタグ・定型文をボタンで入れられるようにするコード(functions.php)
調べたところcodexにやり方が書いてあったので、サクッと実装してみます。h1はタイトルで出るから良いとして、h2&h3・p・独自クラス付きp・定型文をボタンで入れられるようにします。
コード例
codexを参考にしました。見たところ、他にもパラメーターでタイトルやアクセスキー・優先順位などを指定できますが、今回は取り上げません(それゆえコードがシンプルになっています)。実はhtmlタグだけではなく、決まり文句や定型文を入れるのに使えるのもポイント。
*WP5.5 / php7.3で動作確認はしていますが、使う場合は必ず functions.phpのバックアップを取っておいてください。
実行結果
このように、デフォルト状態では表示されていなかった『p』『h2』『クラス付きp』『定型文』が、クイックタグに表示されて、ボタン1回で入るようになりました。少し生産性も上がるかもしれません。
参考リンク(codex)
■クイックタグAPI
https://wpdocs.osdn.jp/クイックタグAPI
あとがき・まとめ
- ブロックエディタは、見出しや段落は、対応するブロックを入れればOK
- クラシックの場合は、クイックタグ追加が必要になることも
- 独自クラス付きタグなども、クイックタグ追加で対応可能
- 定型文も対応できた
まとめるとこんなところでしょうか。『ブロック利用で、既存ブロックで間に合っている』『クラシックで、手打ちが速い』などの場合はあまり役にたちませんが、方法の一例としてご検討ください。『定型文を毎回手打ちするのは大変だな~』というときも使えると思います。
『サイトを既にお持ちで、リニューアル』の場合は、¥10万以下でご対応します(全プラン、月額管理費/24回支払い縛りなどの強制無し)。
【カテゴリ】 - webメディア制作運用, WordPress管理画面カスタマイズ
【タグ】 - functions.php, WPプラグインなしで機能実装, ワードプレス
関連記事
-
-
【WPプラグイン】Smart Custom FieldsとCustom Field Bulk Editorは相性悪い?(空リンク・真偽値フィールドに文字)
今回は、管理人がカスタムフィールド系の案件で使っているプラグイン ...
-
-
イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法
今回は管理人が、お取引先のサイトにつけようとしたけど、より便利な ...
-
-
【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが
今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...
-
-
【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介
今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...
-
-
cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)
今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...
-
-
【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?
今回は、ちょっと需要があるかもしれない『WordPressカスタ ...
-
-
【WP管理画面カスタマイズ】ユーザーページに項目追加&そのフィールドを一覧に出す方法
今回は、以前お仕事で少しやったんですが、『会員・顧客』や『複数執 ...