ビジュアルエディタの「ShapeShifter Button」で追加できるアイテム B! ShapeShifter Button メニュー プラグイン「WP Theme ShapeShifter Extensions」によりTinyMCEのビジュアルエディタに追加されるアイテムを紹介していきます。 「ShapeShifter Button」をクリックすると、スクリーンショットのようなメニューがポップアップしますので、マウス操作と簡単な設定項目を入力してアイテムを挿入することが出来ます。 また、アイテムはスクリーンショットの通りですが、今後のアップデートで追加されたり、位置を編集することもありえますので、ポップアップメニューの雰囲気だけ掴んでもらえればと思います。 行 ビジュアルエディタ 行 エディタ上ではスクリーンショットのような状態ですが、公開ページでは下のようになります。 各アイテムには単純なテキストが入力されている状態です。 カラム１です。 カラム２です。 カラム３です。 カラム４です。 モバイル端末やマインコンテンツの横幅よりも小さいウィンドウでは、各カラムは横並びにならず縦並びになります。 マップ WP Theme ShapeShifter Extensions Google Map Setting Form Google Mapのフォームにはアドレスを入力するだけです。 今後もうちょっと改善するつもりです。 横幅や縦幅の調節だったり、Google APIを使った機能なども使えるようにしようかとも考えています。 あと、「ShapeShifter Button」のフォームのデザインが全体的に手抜きですので、機能の改善が落ち着いたら取り掛かろうかと。 テーブル ShapeShifter Button テーブル 設定項目はシンプルにしたつもりですが、５つのオプションを用意しています。 後にテーブルのタイプを追加することも検討していますが、今のところは１つだけです。 スクリーンショットのように設定すると以下のようなテーブルが挿入されます。 テーブルタイトルなど ID 名前 詳細 メモ 1 アイテム１ これはアイテム１の詳細です。 メモ 2 アイテム２ これはアイテム２の詳細です。 なし 3 アイテム３ これはアイテム３の詳細です。 改行もできます。 ID Name Description Memos テーブルはメインコンテンツの横幅に合わせた一定のサイズとなっていて、ラッパーがそれ以下のサイズになると横にスクロールする形になります。 また、マージンが「auto」に設定されていますので、真ん中に出力されます。 スライダー ShapeShifter Button イメージスライダー ビジュアルエディター上ではスクリーンショットのようになり、実際の出力例は下にある通りです。 現在はリンクオプション無しのイメージスライダーしかありませんので、特に使うことは無いと思います。 フォームのデザインも雑ですし、ビジュアルエディタ上で編集も出来ませんので、現状では本当にイメージを表示するだけの機能しかありませんので、個人的にもオススメしません。 もしも追加した後削除して枠が残ってしまった場合は、ショートカット「Alt + Control + 7」を文字数の上に表示されている要素が「p」になるまで使えば戻ると思います。 まぁ何のことか分かりにくいと思いますが、イメージスライダーを追加した後、削除してみたら意味が分かると思います。 リンク まだ改善が必要で使うことはないと思いますが、サムネイル付きでサイト内のページへのリンクです。 エディター上でHTMLの属性値を全てエスケープする方法 このようにサムネイルイメージ付きのリンクなんですが、スタイルや詳細を加えるなどのオプションがある方が良いのかもしれませんが、デザイン案がありませんので保留しています。 ただ、便利な点としては、ワードプレスのリンクは、リンクをサーチしてから取得するまでに時間が少しかかりますが、こちらは予めリストをテンプレートを出力しますので、挿入ボタンをクリックする時にロード時間がズレます。つまり、リンクを検索するのにAJAXロード時間が減らすことが期待できます。 ショートコード ShapeShifter Button ショートコード ショートコードも「新着記事一覧」と「記事検索」の２種類を用意しています。 ショートコードでは新着記事のように、サイトの更新によって異なるデータが取得できるなど、ショートコードで取得すべきものをまとめていく予定です。 「ShapeShifter」がリポジトリからインストール可能となりました。 テーマ「ShapeShifter」バージョン1.1.2の更新情報 Yahooのストア用APIがなかなか上手くいかない件 テーマ「ShapeShifter」バージョン1.1.0の更新情報 プラグイン「Magic Template Holder」を利用いただき有難うございます テーマ「ShapeShifter」バージョン1.0.80の更新の注意点 プラグイン「WP Theme ShapeShifter Extensions」バージョン1.0.6... WooCommerce 3.0.5に更新すると商品属性タイプがテキストになる問題 Cronでワードプレスのファイルシステムを使えないのことに困ってます。 WooCommerce用のプラグインを作成中 他のウェブサービスのAPIを使ったプラグインも充実させたいと思っていますので、まぁちょっと挑戦していこうかと。とりあえずヤフーストアに挑戦している最中です。データの種類が多いから面倒だなぁとか思いながら、テーマのレビューが始まるまでコツコツ空いてる時間で作成しておりますので、ワードプレスから離れているわけではありませんよ～。 無料で高解像度の画像を探せるサイト「Stock Up」！ その殆どが驚きの「CC0」！ 追加したダッシュボードウィジェットを強制的に一番上に表示させる方法 ワードプレスのテーマやプラグインを翻訳ファイル編集ソフト「Poedit」でローカライズ（翻訳）する... ショートコードの作成・追加方法 出力例としてはこんな感じで、上が「サムネイル付き新着記１０件」で、下は「”キーワード”で10件検索でランダムソート」です。 HTML HTMLを直接入力する事ができます。ビジュアルエディタ上にコピペしたい場合に重宝します。 広告やYoutubeのエンベッドコードを直接ペーストするなどが良い例でしょう。 B!