wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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)

あとがき・まとめ

  • ブロックエディタは、見出しや段落は、対応するブロックを入れればOK
  • クラシックの場合は、クイックタグ追加が必要になることも
  • 独自クラス付きタグなども、クイックタグ追加で対応可能
  • 定型文も対応できた

まとめるとこんなところでしょうか。『ブロック利用で、既存ブロックで間に合っている』『クラシックで、手打ちが速い』などの場合はあまり役にたちませんが、方法の一例としてご検討ください。『定型文を毎回手打ちするのは大変だな~』というときも使えると思います。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webメディア制作運用, WordPress管理画面カスタマイズ
【タグ】 - , ,

  関連記事

イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法

今回は管理人が、お取引先のサイトにつけようとしたけど、より便利な ...

【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが

今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

今回は、CSSフレームワークなどを使ってサイトを構築していると、 ...

【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?

今回は、ちょっと需要があるかもしれない『WordPressカスタ ...

【WP管理画面カスタマイズ】ユーザーページに項目追加&そのフィールドを一覧に出す方法

今回は、以前お仕事で少しやったんですが、『会員・顧客』や『複数執 ...

【WPプラグイン無し】3行のコードで、ブロックエディタ&ブロックライブラリCSSを無効にする方法

今回は、管理人が『お取引先さまのwebサイトでブロックエディタま ...