WPワークス

ダウンロードコンテンツやワードプレスのカスタマイズ方法を配信中。

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

 

ShapeShifter Button メニュー
ShapeShifter Button メニュー

 

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

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

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

 

ビジュアルエディタ 行
ビジュアルエディタ 行

 

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

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

カラム1です。

カラム2です。

カラム3です。

カラム4です。

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

 

 

マップ

 

WP Theme ShapeShifter Extensions Google Map Setting Form
WP Theme ShapeShifter Extensions Google Map Setting Form

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

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

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

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

 

 

 

テーブル

 

ShapeShifter Button テーブル
ShapeShifter Button テーブル

 

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

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

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

 

 

テーブルタイトルなど
 ID 名前  詳細  メモ 
 1  アイテム1 これはアイテム1の詳細です。  メモ 
 2  アイテム2 これはアイテム2の詳細です。  なし 
 3  アイテム3 これはアイテム3の詳細です。

改行もできます。 

 
 ID  Name Description  Memos 

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

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

 

スライダー

ShapeShifter Button スライダー
ShapeShifter Button イメージスライダー

 

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

 

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

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

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

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

 

リンク

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

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

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

 

ショートコード 

 

ShapeShifter Button ショートコード
ShapeShifter Button ショートコード

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

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

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

 

HTML

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

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

メニュ
ホーム
トップへ