またWordPressネタになってます。やっぱりアウトプットを定期的にしておかないと忘れちゃうしね！同じ状況になった人がたどり着いてくれればと思いますです。
今回は前回Speech Bubbleのプラグインの紹介をしたのですが、そこでSyntaxHighlighterの表示がどーしてもうまく行かなかった事があったのですが、どうにか改善策を見つけたのでその辺のことを書いてます。
目次
SyntaxHighlighterとは？
SyntaxHighlighterと言うのはWordPressをやっている人なら御用達のソースを記事内に表示させるための便利なプラグインのことを指します。詳しい仕様はノースキルの僕にはわからないのですがソースをこんな感じで表示させることが出来ます。
<?php if( is_front_page() ){ ?>
$('#gnav').addClass('active');
<?php }else{ ?>
$('#gnav').removeClass('active');
<?php } ?>
こんな感じ、よく見ますよね。
これがショートコードだと変なんです
WordPressのショートコードは非常に便利なやつで覚えられたら便利なのですが、ノースキルの僕は覚えてません、コピペしてます。
WordPressショートコードURL：https://wpdocs.osdn.jp/%E3%82%B7%E3%83%A7%E3%83%BC%E3%83%88%E3%82%B3%E3%83%BC%E3%83%89
こんな感じで[〇〇〇〇]の様に表示されている箇所がショートコードです。
今回はショートコードの解説ではないのであっさりの紹介までとなります。
例えばyoutubeの動画を貼り付ける際など便利なWordPressのショートコードがあります。
通常は共有の埋め込みコードの設定で反映させていますが、ショートコードで反映させるのは下記です。
[youtube src="q6T0wOMsNrI"]
本来埋め込みの際に設定するコード
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/q6T0wOMsNrI” frameborder=”0″ allowfullscreen></iframe>
若干短くなりました。
youtubeのURLのhttps://www.youtube.com/watch?v=q6T0wOMsNrIのv=〇〇〇〇のみを設定すればOKです。
[youtube src="q6T0wOMsNrI"]
他にもWordPressのショートコードに使い方は色々あります。
そのショートコードがSyntaxHighlighterだとうまく反映出来ない
現象があるようです。
例えばこのショートコードを表示したい場合。
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] よかったらシェアしてね！ [/speech_bubble]
通常通りの設定をすると下記のようになります。
"Aよかったらシェアしてね！
本来は1行のソースなのに関係ないのがバーと出ちゃうんです。
色々設定も試してみても・・・
ショートコードをそのまま表示させるには
知識が無いのでなんでかは説明出来ないのですが、表示させることは極めて簡単ですた。
ソースの前後を
[] ←これで囲んであげてください。
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="A さん"] よかったらシェアしてね！ [/speech_bubble]
上ではなく、こう！
[[speech_bubble type=”drop” subtype=”L1″ icon=”1.jpg” name=”A さん”] よかったらシェアしてね！ [/speech_bubble]]
これで表示出来るようになるはずです！
ひとつ賢くなりました。
ほな・・・また。彡(^)(^)
