ビジュアルエディタの「ShapeShifter Button」で追加できるアイテム

プラグイン「WP Theme ShapeShifter Extensions」によりTinyMCEのビジュアルエディタに追加されるアイテムを紹介していきます。

「ShapeShifter Button」をクリックすると、スクリーンショットのようなメニューがポップアップしますので、マウス操作と簡単な設定項目を入力してアイテムを挿入することが出来ます。

また、アイテムはスクリーンショットの通りですが、今後のアップデートで追加されたり、位置を編集することもありえますので、ポップアップメニューの雰囲気だけ掴んでもらえればと思います。

行

エディタ上ではスクリーンショットのような状態ですが、公開ページでは下のようになります。

各アイテムには単純なテキストが入力されている状態です。

モバイル端末やマインコンテンツの横幅よりも小さいウィンドウでは、各カラムは横並びにならず縦並びになります。

マップ

Google Mapのフォームにはアドレスを入力するだけです。

今後もうちょっと改善するつもりです。

横幅や縦幅の調節だったり、Google APIを使った機能なども使えるようにしようかとも考えています。

あと、「ShapeShifter Button」のフォームのデザインが全体的に手抜きですので、機能の改善が落ち着いたら取り掛かろうかと。

テーブル

設定項目はシンプルにしたつもりですが、５つのオプションを用意しています。

後にテーブルのタイプを追加することも検討していますが、今のところは１つだけです。

スクリーンショットのように設定すると以下のようなテーブルが挿入されます。

テーブルはメインコンテンツの横幅に合わせた一定のサイズとなっていて、ラッパーがそれ以下のサイズになると横にスクロールする形になります。

また、マージンが「auto」に設定されていますので、真ん中に出力されます。

スライダー

ビジュアルエディター上ではスクリーンショットのようになり、実際の出力例は下にある通りです。

現在はリンクオプション無しのイメージスライダーしかありませんので、特に使うことは無いと思います。

フォームのデザインも雑ですし、ビジュアルエディタ上で編集も出来ませんので、現状では本当にイメージを表示するだけの機能しかありませんので、個人的にもオススメしません。

もしも追加した後削除して枠が残ってしまった場合は、ショートカット「Alt + Control + 7」を文字数の上に表示されている要素が「p」になるまで使えば戻ると思います。

まぁ何のことか分かりにくいと思いますが、イメージスライダーを追加した後、削除してみたら意味が分かると思います。

リンク

まだ改善が必要で使うことはないと思いますが、サムネイル付きでサイト内のページへのリンクです。

エディター上でHTMLの属性値を全てエスケープする方法

このようにサムネイルイメージ付きのリンクなんですが、スタイルや詳細を加えるなどのオプションがある方が良いのかもしれませんが、デザイン案がありませんので保留しています。

ただ、便利な点としては、ワードプレスのリンクは、リンクをサーチしてから取得するまでに時間が少しかかりますが、こちらは予めリストをテンプレートを出力しますので、挿入ボタンをクリックする時にロード時間がズレます。つまり、リンクを検索するのにAJAXロード時間が減らすことが期待できます。

ショートコード 

ショートコードも「新着記事一覧」と「記事検索」の２種類を用意しています。

ショートコードでは新着記事のように、サイトの更新によって異なるデータが取得できるなど、ショートコードで取得すべきものをまとめていく予定です。

[shapeshifter_new_entries number=”10″ is-thumbnail-on=”true” excerpt-number=”200″]

[shapeshifter_search_entries keywords=”キーワード” number=”10″ orderby=”rand” is-thumbnail-on=”true” excerpt-number=”200″]

出力例としてはこんな感じで、上が「サムネイル付き新着記１０件」で、下は「”キーワード”で10件検索でランダムソート」です。

HTML

HTMLを直接入力する事ができます。ビジュアルエディタ上にコピペしたい場合に重宝します。

広告やYoutubeのエンベッドコードを直接ペーストするなどが良い例でしょう。