Warning: Constant POST_PLUGIN_LIBRARY already defined in /home/pasora/pasona-sp.com/public_html/wp-content/plugins/similar-posts/similar-posts.php on line 27
WordPressでショートコードをそのまま表示させるには | 思いだし にっき
サイトアイコン 思いだし にっき

WordPressでショートコードをそのまま表示させるには

<p style&equals;"text-align&colon; left&semi;">Speech Bubbleの設定をして記事に吹き出しがいれられるようになったので、そのことを備忘録的に記事に書いてみました。<&sol;p>&NewLine;<p>が、ショートコードを記事にいれると吹き出しに変換されてしまうという・・当然ですね&lpar;&Hat;&Hat;&semi;<&sol;p>&NewLine;<p>そこでそのまま表示させる方法を調べてみました。<&sol;p>&NewLine;<p><&excl;--more--><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2>ショートコードを記事の中でそのまま表示させる方法<&sol;h2>&NewLine;<p>WordPressで便利なショートコードを記事の中にそのまま表示したい場合、<br &sol;>&NewLine;そのまま記述するとショートコードとして認識されてしまうため、ブラウザ上ではSpeech Bubbleの場合は、吹き出しになってしまいます。<&sol;p>&NewLine;<p>これはとても簡単な方法で解決しました。<&sol;p>&NewLine;<p>例えば記事中で<&sol;p>&NewLine;<p>&&num;91&semi;speech&lowbar;bubble type&equals;&&num;8221&semi;drop&&num;8221&semi; subtype&equals;&&num;8221&semi;L1&&num;8243&semi; icon&equals;&&num;8221&semi;1&period;jpg&&num;8221&semi; name&equals;&&num;8221&semi;A さん&&num;8221&semi;&&num;93&semi; ãŠã“んばんわ&&num;91&semi;&sol;speech&lowbar;bubble&&num;93&semi;<&sol;code><br &sol;>&NewLine;&&num;91&semi;speech&lowbar;bubble type&equals;&&num;8221&semi;drop&&num;8221&semi; subtype&equals;&&num;8221&semi;R1&&num;8243&semi; icon&equals;&&num;8221&semi;1&period;jpg&&num;8221&semi; name&equals;&&num;8221&semi;B さん&&num;8221&semi;&&num;93&semi; おばんです &&num;91&semi;&sol;speech&lowbar;bubble&&num;93&semi;<&sol;p>&NewLine;<p>という記述をしたとき、このまま公開すると<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-2355" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;SC1&lowbar;2&period;png" alt&equals;"プレビューでのショートコード表示" width&equals;"641" height&equals;"286" &sol;><&sol;p>&NewLine;<p>こんな風になります<&sol;p>&NewLine;<p>そのまま表示させるには、このショートコードの[]のカッコの部分を書き換えます<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1096" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;sc4-300x80&period;png" alt&equals;"コードの置き換え" width&equals;"300" height&equals;"80" &sol;><&sol;p>&NewLine;<p>つまり、<&sol;p>&NewLine;<p> <br &sol;>&NewLine;<img class&equals;"alignnone size-full wp-image-2356" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;sc2&lowbar;2&period;png" alt&equals;"ショートコードをそのまま" width&equals;"609" height&equals;"202" &sol;><&sol;p>&NewLine;<p>とすれば、ブラウザで記事を見た時ショートコードがそのまま表示されます。<&sol;p>&NewLine;<p><img class&equals;"alignnone size-full wp-image-1089" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;t06&period;png" alt&equals;"ショートコードを表示させた図" width&equals;"618" height&equals;"296" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<h2><strong>他の方法<&sol;strong><&sol;h2>&NewLine;<p>このショートコードの[]のカッコの部分を二重に記述<br &sol;>&NewLine;つまり<br &sol;>&NewLine;次のように記述します<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1090 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;t09&period;png" alt&equals;"[]を使う方法" width&equals;"884" height&equals;"173" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>こちらの方も簡単ですね(^^)<&sol;p>&NewLine;<p>[]を2重にする場合は記述の中にある[]は(図の赤枠の部分)そのままでいいようです。<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><img class&equals;"alignnone wp-image-1091 size-full" src&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;wp-content&sol;uploads&sol;2016&sol;10&sol;sc3&period;png" alt&equals;"[]はそのまま" width&equals;"884" height&equals;"173" &sol;><&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p>全部の[]を2重にすると、それも表示されてしまうようです<&sol;p>&NewLine;<p>ソースコードなどについては、詳しくないのですいません。<&sol;p>&NewLine;<p>なぜ?と言われても説明ができません(--;<br &sol;>&NewLine;実験の結果を書いています。<&sol;p>&NewLine;<p>もし、ここら辺のことを詳しく説明していただける方がいらっしゃいましたら、コメントなどで説明していただけると助かります&lt&semi;&lpar;&lowbar; &lowbar;&rpar;&gt&semi;<&sol;p>&NewLine;<p>これで完了!のはずでしたが・・・ここでも躓いてしまいました(TT)<&sol;p>&NewLine;<p>&NewLine;なので次には躓いたあれこれです<&sol;p>&NewLine;<p>&nbsp&semi;<&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;946&period;html">WordPressで簡単ファビコンの作り方へ<&sol;a><&sol;p>&NewLine;<p><a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;1111&period;html">WordPress設定でのトラブルあれこれと対処へ<&sol;a><&sol;p>&NewLine;<p style&equals;"text-align&colon; right&semi;"> <a href&equals;"http&colon;&sol;&sol;www&period;pasona-sp&period;com&sol;page-1472&period;html"><span style&equals;"color&colon; &num;0066cc&semi;">WordPress一覧へ<&sol;span><&sol;a><&sol;p>&NewLine;<p><a href&equals;"&sol;&sol;life&period;blogmura&period;com&sol;zatsugaku&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener"><img src&equals;"&sol;&sol;life&period;blogmura&period;com&sol;zatsugaku&sol;img&sol;zatsugaku88&lowbar;31&period;gif" alt&equals;"" width&equals;"88" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a href&equals;"&sol;&sol;life&period;blogmura&period;com&sol;zatsugaku&sol;ranking&period;html" target&equals;"&lowbar;blank" rel&equals;"noopener">にほんブログ村<&sol;a><&sol;p>&NewLine;<p><a title&equals;"日々の出来事 ブログランキングへ" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200"><img src&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;img&sol;banner&sol;c&sol;banner&lowbar;1&sol;br&lowbar;c&lowbar;9200&lowbar;1&period;gif" width&equals;"110" height&equals;"31" border&equals;"0" &sol;><&sol;a><br &sol;>&NewLine;<a style&equals;"font-size&colon; 12px&semi;" href&equals;"http&colon;&sol;&sol;blog&period;with2&period;net&sol;link&period;php&quest;1839199&colon;9200">日々の出来事 ブログランキングへ<&sol;a><&sol;p>&NewLine;&NewLine;

モバイルバージョンを終了