ワードプレス　アルバトロス　ショートコード

ショートコードとは、色々な動作を短いコードで表現させることができる機能です。今使っているテーマ（アルバトロス）には、ショートコードがいろいろ装備されています。

今回は、吹き出し機能を使ってみます。

このようなアイコン付きの吹き出しを記事に表示させることができます。

先にアイコンに使う画像を用意しておきます。150px☓150pxの正方形の画像をファイルにアップロードしておきます。

 

アルバトロスのテーマのサイト　から必要なショートコードをコピーして使うことにします。→「テーマの使い方」にカーソルを合わせ、「アルバトロスの使い方」をクリック

 

「ショートコードの使い方」をクリック

 

吹き出し機能の赤枠内の文字列をすべてコピーします。

 

記事投稿画面で、テキストをクリックします。

 

先程コピーした文字列を貼り付けます。

 

マーカーをいれた”　”で囲まれた部分を編集していきます。

icon=” ” はしゃべっている人のアイコン画像を設定します。赤のマーカー部分 /wp-content/uploads/2015/05/10247814_421987717957146_7219859436076224289_n-150×150.jpg　を削除して（”　”は消さないように）、先程アップロードしておいたアイコンに使う画像のURLを入力します。

 

アイコンに使う画像のURLをコピーします。（「投稿に挿入」で貼り付けません）

 

voice icon=”　”のダブルコーテションの間にコピーしたURLを貼り付けします。

 

同じように、name=”　”のダブルコーテション間に名前（日本語でもローマ字でも）を入力します。

type=”l” のｌはLEFT（レフト）のｌです。右側にアイコンを付ける場合は RIGHT（ライト）のｒを入力します。

その後ろの　ビジュアルエディタ内で～と書いてある部分が吹き出しの中の文章になるので、ここに文章を入力します。

 

管理画面の記事投稿画面では、このように文字列ですが

 

プレビュー画面でみてみると、

 

[voice icon=”http://maturi.circle-ebs.com/wp-content/uploads/2018/05/mari.jpg” name=”まつり” type=”l”]吹き出しの作成方法です[/voice]

 

上記のようにアイコン付きの吹き出しが表示されます。

 

のようなオプションがあり、

 

[voice icon=”http://maturi.circle-ebs.com/wp-content/uploads/2018/05/mari.jpg” name=”まつり” type=”r fb”]吹き出しの作成方法です[/voice]

とfacebook風にしたり、

 

[voice icon=”http://maturi.circle-ebs.com/wp-content/uploads/2018/05/mari.jpg” name=”まつり” type=”r line”]吹き出しの作成方法です[/voice]

とline風に表示したりできます。

 

ただし、facebook風、line風ともアイコンが右側にあるときのみ色がつきます。左側のアイコンの場合は、グレー背景となります。