★★★ たった "1日" でできるWordPressブログの作り方講座 ★★★ はじめてみる

WordPressエディタから挿入するタグにクラス名を付与する方法

タグ手打ちの手間がなくなる!WordPressエディタから挿入するタグに専用のクラス名を付与する方法

WordPressでは投稿画面エディタからクイックタグと呼ばれる機能を使って簡単にタグを挿入できるようになっています。

例えばbタグで文字を太字にしたり、blockquoteタグで文章を引用したり、あるいはaタグでリンクを張るなどの操作は全てクイックタグを使えば一発です。

わざわざタグを手打ちしなくていいから便利ですよね。

でも挿入するタグによっては独自のクラス名を付けたくなることもあるはず

そこで、クイックタグから挿入したタグに、オリジナルのクラス名を付けるやり方について説明していきます。

クイックタグにクラス名を付与する手順

挿入タグにオリジナルのクラス名を付ける手順は次の通り

  1. タグに適用したいカスタムCSSを新規作成
  2. 保存時のタグの置き換え処理を追加

手順は簡単でこの2つだけです。

そしてここでは、エディタに元々ある番号なしリストボタン←このようなボタン )から挿入されるリストにカスタムCSSを適用する、という作業を例として紹介します。

ではそのやり方を次で順番に見ていきましょう。

1. カスタムCSSの新規作成

まず最初にやることは挿入したタグに適用したい、カスタムCSSの新規作成です。

その手順は次の通り

まず今使っているテーマのフォルダ内にある style.css を開いてください。

このファイルはテーマ全体のスタイルが書かれているCSSファイルで、どのテーマを使っていたとしても必ずあるはずです。

もしWordPress内で開くならメニューから「外観」ー>「テーマの編集」をクリックするとテーマで使われているファイルが編集可能

まずはテーマの編集を開く(ただし現在は「テーマエディター」)

すると次のようなテーマの編集画面が開き、エディタからstyle.cssの内容が編集できるようになります。

テーマの編集画面を開き、style.cssの内容を編集していく

ちなみにテーマを編集するときは 子テーマを作成 した方がいいです。

元々のテーマファイルを編集してしまうと、アップデート時に内容が消えてしまう恐れがあるので子テーマがない場合は作っておきましょう。

ではstyle.cssを開いたら、そこにタグに適用したいカスタムCSSを追加しましょう。

例えば番号なしリストタグをカスタマイズしたいなら、次のように背景色変更のCSSなどを追加します。

.my_ul{
  background: lightgray;
}

上のCSS内の「my_ul」というのが、挿入したタグに適用するクラス名になります。

ここは他のクラス名と被らない、分かりやすいクラス名を付けてください。

2. 保存時のタグ置き換え処理を追加

では次に、投稿を保存したときにタグにクラス名を付与する処理を追加していきます。

その手順は次の通り

まず今使っているテーマの「functions.php」という名前のファイルを開きましょう。

開き方は先ほどstyle.css開いた時のようにテーマの編集画面の中から functions.php というファイルを探して開くのが簡単だと思います。

次に functions.php を開き、保存時にタグにタグを付与するスクリプトを追加する

ただし functions.php はテーマによってはない場合もあるので、もし見つからないときはファイルを作成してください。

ではそのファイルに、挿入タグをクラス名をつけたもので置き換えるコードを追加します。

↓ たとえば次がそのコード例

function my_replace_to_custom_tags( $postarr ) {
    $postarr['post_content'] = str_replace('<ul>', '<ul class="my_ul">', $postarr['post_content'] );
    return $postarr;
}
add_filter('wp_insert_post_data', 'my_replace_to_custom_tags');

このコードで重要なのは次の部分

$postarr['post_content'] = str_replace('<ul>', '<ul class="my_ul">', $postarr['post_content'] );

この部分でulタグを my_ul というクラス名を与えたものに置き換えています。

これを一般化するなら次のようなコードになります。

$postarr['post_content'] = str_replace('置き換えたいタグ', 'クラス名を付与したタグ', $postarr['post_content'] );

置き換えたいタグ」、「クラス名を付与したタグ」をそれぞれ目的のものに置き換えるだけです。

以上の内容を追加したら functions.php を保存しましょう。

これで投稿画面上でタグの置き換えがされるようになりました。

正しくクイックタグが動くか確認しよう

ではここまでの手順が終わったら、正しく動作するか最後に確認

正しい動作になっているなら、クイックタグボタンからタグを挿入して投稿を保存した後に、そのタグにクラス名が自動的についているはずです。

例えば先ほどの ulタグ で説明するなら、普通にリンクボタンからリストを挿入すると次のタグが挿入されますよね。

普通にWordPressのテキストエディタ上でulリストを挿入したときの様子

この時点ではタグにはクラス名はついていません。

このように目的のタグを挿入した状態で一旦投稿を保存してみてください。

そして保存後にタグが次のようにクラス名(ここでは my_ul )が付いたものに置き換わっていれば正しく動作しています。

投稿を保存すると、専用のクラス名が自動で付与されるようになる。地味に便利

もし置き換えがうまくいっていないようなら、

  • style.css のCSSが間違っている
  • function.phpの内容が間違っている

この2つが考えられるので、もう一度手順を見直してください。

まとめ

以上が投稿エディタ上でタグにクラス名を付与する手順

全てのタグに手作業でクラス名を付けていくと、時間も手間もかかりすぎます。

なので投稿保存時に一括でクラス名のついたタグに置き換えれば、その分手間が少なくなって楽になること間違いなしです

The following two tabs change content below.

フク郎

昔はプログラミングに熱中していたが、ブログとWordPressに興味を持ち始め今はサイト・ブログ作りが生きがい。自分の「好き」をブログに変えたい、情報発信したい人に役立つWordPress術・サイト構築術を発信中。一日一歩楽しんでブログ構築できるように読みやすい&楽しい記事作りを心がけています。Twitterアカウントはこちら ⇒ フク郎@Fukuro-Press