★ 今日はこんな記事も読まれています ★

WordPress使い始めた頃に悩みがちなこと３つと対処法

2016年12月13日WordPress

 

これまで使っていたのよりもいいプラグインはないかと探していたところ、ショートコードそのものを表示させるのに苦労している人が意外と多いことに気づきました。

確かにWordpressを使い始めた頃はぼくもそこで悩んだ。そこで、かつてぼく自身がハマったこと3つと、その対処法を書き出してみました。

ショートコードのソースを表示させられない

ショートコードの例としてソースを表示させたいのに、コードをそのまま書くと実行されてしまうんですよね。

Shortcodes Ultimateの例ですが、

[su_spoiler title="クリック・タップすると詳しい内容が表示されるよ" style="fancy" icon="caret-square"]詳しい内容が表示されたよ[/su_spoiler]

をそのまま書くと、下のように実行されてしまう。

クリック・タップすると詳しい内容が表示されるよ
詳しい内容が表示されたよ

ショートコードそのものを表示する方法

ショートコードそのものを表示させたい時は[]でエスケープします。

[shortcorde]～文章～[/shortcorde]のセットを外側から[]でさらにくくればOK。

[[su_spoiler title="クリック・タップすると" style="fancy" icon="caret-square"]表示されたよ[/su_spoiler]]

ショートコードの中にさらにショートコードがある場合は、一番外の[]をくくります

[[su_tabs] [su_tab title="Tab 1"] Tab 1 content [/su_tab] [/su_tabs]]
Shortcode Ultimateについては Shortcode Ultimate覚え書き

jQueryが動かない

WordPressではjQueryが読み込まれています。しかし、jQueryのエイリアス（代用品） $ が jQuery として使えないため$のままでは動きません。

対処法

$ の代わりに jQuery とすればとりあえず使えます。

jQuery(function($){
～
}):

の中であれば $ も利用できます（functionに ($) が必要）。

あとカプセル化という方法もあります。(function($){と})(jQuery);でくくっちゃうんです。

(function($){
本文～
})(jQuery);

 

javascript に改行が入る、空行があると<p>タグが挿入される、一部が勝手に消される

本文に<script></script>を記述する時、<p>や<div>を変数に入れてビジュアルエディタに戻ると、改行されて勝手にいじられます。

<script>var a="<p>";var b="</p>";</script>

と書くと、

<script>var a="</p>
<p>
</p>
<p>";var b="</p>
<p>
</p>
<p>";</script>

なんてことになる。

また、テキストモードのままなら問題なくても、onChangeはビジュアルエディタに戻ると消されます。

<input type="num" onChange(“jikkou()")/>

なら、 onChange(“jikkou()")が消えてしまう。

さらに<script></script>の間に空行があると、勝手に<p>タグが挿入されて動かなくなります。

対処法

  • ビジュアルエディタに戻らない
  • 外部ファイルにする
  • プラグインを使う
  • カスタムフィールドを使う
  • スクリプトには空行を作らない

対処法はこのくらいかな。変更点が少ないのであれば「ビジュアルエディタに戻らない」。

どうしてもビジュアルエディターを使いたい時はコードをどこかに避難させておいて、作業が終わったらペーストが一番手軽ですね。

WordPressWordpress,jQuery