タグ: WordPress

WordPress で Amazon の商品リンクを並べる方法

Amazon アソシエイトに参加していると，しばしば WordPress で商品の紹介をすることになります．ただ，Amazon の商品リンクは，左端に設置されます．そして，右側が空いてしまいます．同時に複数の商品を紹介するときには，その空いた空間を使い商品リンクを並べたくなります．その方法を示します．

以下に示すように，flexBox を使い要素の配置をすると品よく商品リンクを並べることができます．

<ul style="list-style:none; display:flex; justify-content:space-evenly">
    <li>  ここに1番目の商品リンクを記述する </li>
    <li>  ここに2番目の商品リンクを記述する </li>
             •••
</ul>

商品リンクがひとつの場合は，センタリングされます．もちろん，商品リンク以外を並べることも可能です．上手に使うと，結構便利な機能です．

以下に具体例として， WordPress 関係の複数の書籍を紹介します．

WordPress の便利なツール： Shortcodes Ultimate

Shortcodes Ultimate は，WordPress で使うことのできる便利なツールです．インストール方法は，以下のとおりです．

  1. ダッシュボードのプラグインを選択します．
  2. そして，[新規追加]をクリックし，現れた画面の[プラグインの追加] の入力フォームに「Shortcodes Ultimate」と入力します．
  3. 現れた「Shortcodes Ultimate」の画面のボタン [今すぐインストール] をクリックします．
  4. インストール完了後，[有効化]をクリックします．

使い方は，Documentation – Shortcodes Ultimat を参照下さい．

WordPress で SVG ファイルを表示 (アップロード) する方法

驚いたことに，素のままの WordPress では SVG ファイルをアップロードすすことができません．アップロードしようとすると「セキュリティ上の理由によりこのファイル形式は許可されていません」と表示されます． WEB サイトのベクター図では，SVG が最も適しています． SVG を使うと図を拡大してもボケないので，とてもきれいです．細部を見たい読者の要求に応えることができます． WordPress で SVG が使えないのは言語道断です．

ネットで調べたところ，プラグインの WP Add Mime Types で問題が解決できることが分かりました． これは，WordPress へ MIME タイプと拡張子の追加を可能にします．

インストールと設定は，次のとおりです．

  1. インストール
    1. ダッシュボードのプラグインを選択します．
    2. そして，[新規追加]をクリックし，現れた画面の[プラグインの追加] の入力フォームに「WP Add Mine Type」と入力します．
    3. 現れた「WP Add Mine Type」の画面のボタン [今すぐインストール] をクリックします．
    4. インストール完了後，[有効化]をクリックします．
  2. 設定
    1. ダッシュボードの設定 > Mime Type設定を選択します．
    2. 現れた画面「WP Add Mime Types 管理設定」の下の方の「追加の項目」に，「svg = image/svg+xml」を記述します．
    3. [設定を保存] をクリックして完了です．

以上で， SVG がアップロード可能になり，表示もされます．

画像の挿入 (Easy FancyBox)

WordPress で Easy FancyBox を使った単独の画像を表示させる方法を示します．Easy FancyBox の効果がある画像は，次のようにして挿入します．

  1. 上部にある [メディアを追加] をクリックします．
  2. メディアを挿入のタブ「ファイルをアップロード」を選択します．画像をドロップ，あるいはファイルを指定します．すでにファイルをアップロードしている場合は，この操作は不要です．
  3. タブ「メディアライブラリ」を選択します．そして，挿入する画像をクリックします．
  4. 必要に応じて，画像の編集を行います．[画像を編集] をクリックします．すると，トリミングと回転，上下・左右変換，サイズの変更が可能になります．変更後は「保存」をクリックします．
  5. 画像の設定をを行います．
    • タイトルやキャプション，代替テキスト，説明を記述します．書かなくても問題はありません．
    • 配置を選択します．リンク先は「メディアファイル」にします．適当な画像サイズを選択します．
  6. [投稿に挿入] をクリックします．

以上で画像が挿入されます．以下にその例を示します．画像をクリックすると拡大されます．ちょっといかした WEB サイトになります．

図が表示されない時．
キャプションの記述も可能です．