ブログ

【JIN】ショートコード記事内への表示方法

 

ビジュアルエディタでJINのショートコードを挿入しようとして思った事。

シワユリ
シワユリ
あれ、ボックス18ってどんなんだったっけ?

毎回確認するのがめんどくさくて、先日全部表示したものをまとめました。

【2019】JINショートコードまとめ初心者向けJINのショートコード 一覧です。記事作成の時に別タブで開いておくと、作業がはかどる思います。コードのコピぺも可です。ぜひご活用ください。...

そして、次につまづいた事。

シワユリ
シワユリ
あれ、ショートコードをそのまま記事に表示するにはどうやってやるんだ?

こういうやつです。

実はこの表示の仕方に苦戦しました。

同じく悩んでいる方いませんか?

なんと、JINだったら簡単に解決できますよ(^-^)

ショートコードを表示前の設定

シンタックスハイライター機能追加

シンタックスハイライター機能って知ってますか?

プログラムコードに色を付けて、表示してくれます。

ここまでたどり着くのに時間を要しました。

JINのサイトでちゃんと説明してくれてました。

JINテーマ搭載の「シンタックスハイライター機能」を使う方法

JINのサイトと説明が重複しますがスムーズに進めるために、画像も入れておきます。

まずビジュアルエディター上に「コードサンプルを挿入/編集」というアイコンを表示させなければいけません。

ダッシュボードの「サイトをカスタマイズ」をクリック

その他設定を」をクリック。

「コードのシンタックスハイライターを利用する」にチェック。

はい、これでOKです。

シンタックスハイライター機能を使って表示してみる

では、実際やってみましょう。

※ショートコード →アイコン→チェックとクリックした時に表示される[jin_icon_check color="#e9546b" size="18px"]
を記事内に表示させたかったわたしの例です。

「コードサンプルを挿入/編集」をクリック。

この画面になるので、ショートコードを入力(貼り付け)してOKをクリック。

※この時ショートコード をさらに角括弧[ ]で囲むのを忘れないでください。

するとビジュアルエディタ上と記事内の表示はこうなります。

ビジュアルエディタ
[[jin_icon_check color="#e9546b" size="18px"]]
記事内

はい、できました(^-^)

シワユリ
シワユリ
右上にカーソルを持っていくと「copy」もできます!

JINショートコード に色を付けないで記事内に表示させる

シンタックスハイライターを使用しない

「コードサンプルを挿入/編集」を押さずに、そのままショートコード を表示させたら角括弧[ ]で囲むだけです。

そうすると、下記のように記事内に表示されます。

色が付いてないですね。

[jin_icon_check color="#e9546b" size="18px"]

角括弧に気づかず延々とググりまくったわたしの話

ググって調べた方法で何回やってもショートコード がコードのまま表示されず、解決するまでにすごく時間がかかりました。

でもこれでまた一つ覚えたのでレベルアップです。

まだまだ勉強しないとですね。

また何か発見したら 記事にします。

シワユリ
シワユリ
ツイッターでも発信してるので、よかったらシワユリ(@shiwa_yuri)をフォローしてね♪
ABOUT ME
shiwayuri
男の子2人のママです。仕事のストレスで育児も家事もうまくいかず、怒ってばっかりが嫌になり、育児、家事に専念できる「自宅で仕事」を目標に初めての事に挑戦し始めた女です。 チビちゃん達が大好きです( •ॢ◡-ॢ)-♡