.unwrap() 使ってクライアントさんの使い勝手を考えてみる

手間を減らしてみよう

WordPress好きです、ええ、大好きです。

先日、WordPressを使って美容室サイトを作っていた際、クライアントさんがPC操作はあまり得意ではないことが判明しまして、一先ずやってみたことをメモとして残しておこうと思います。

クライアントさんが普段からブログなどを書いている方なら、特に迷う必要もないと思いますが、そうでない場合、投稿に画像を追加する際は、

• メディアを追加ボタンをクリック
• 載せたい画像をPCの中から選ぶ
• タイトルやキャプションを書き込む
• 左・中央・右寄せもしくは、なしで画像を置く場所を選択
• 投稿に挿入ボタンをクリック

どうする？ → 至って簡単 (^^)

ゴールは、「クライアントさんがどんな操作をしても<p>タグと<a>タグは取り去る」です。
これはjQueryでやっちゃいます。jQueryなのでWordPressに限らず、どのCMSでも使い回せるってことですね (^^)

.unwrap()

これです。指定した要素の親要素を削除するってやつです。.size()はその要素が存在するかどうかをチェックしています。ですので、削除したい要素内に<p>, <a>タグがあれば、その親要素を削除するという流れです。
最初から<p>, <a>が存在しなければスルーしてくれます。

[javascript]
jQuery(function($) {
if($("要素 p").size() || $("要素 a").size()) {
$("要素 a").unwrap();
$("要素 img").unwrap();
}
});
[/javascript]

ということで、結果的に、<p>, <a>タグは消えることはないのですが、レイアウト的にどうしてもキープしたいときに使えるのではないかと思います (^^)。