ビジュアルエディタの「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」を久々に更新して参ります。勉強しながら作成していたので一応愛着あるテーマですし、ワードプレスのアップデートもやってきそうですし、全然それに間に合うか分かりませんが、プラグインも合わせて更新に向けて色々と見直しながら、改善と準備をしてます。ええ、色々と全体的になんでこんな書き方してるんだとか、自分でも疑問に思うようなところも多々 テーマやプラグインに独自のアップデートチェッカーを適用させる方法 文章を書くのが久しぶりな気がしますが、ブログも更新しようと思います。テーマやプラグインを配信したい場合、ワードプレスのリポジトリを利用するのが一番だとは思いますが、リポジトリを利用したくない方やリポジトリに適さないテーマやプラグインを扱う方もいらっしゃる筈ですので、少し違った方法で更新通知ができ、他のテーマやプラグインと同じように、管理画面から更新できるようにする方法を紹介していきます。プラグイン プラグインを２つアップロード WooCommerce用のプラグインを作ってアップロードしてみました。１つ目は「Token Vendor for WooCommerce」です。名前通り「WooCommerce」で「トークン」を販売・生成・検証することができるようにするものです。トークンに付随するデータなどから、その値や有効期限などをチェックしてくれます。プラグインでも有効性をチェックするのに使えるかなとも思ったので作成してみまし 「ShapeShifter」がリポジトリからインストール可能となりました。 久々にブログ書きましたね。ブログ更新はちょっとサボリ気味でしたが、テーマの更新は裏でやっておりまして、そういえばリポジトリからインストールできるようになった報告するのを忘れていました。更新用プラグインはリポジトリ利用にあたり問題点が見つかった時など、臨時の策として更新通知をすることも出来るかと思いますが、問題がなければリポジトリから直接更新いただける筈です。リポジトリのリンク先は「ShapeShi テーマ「ShapeShifter」バージョン1.1.2の更新情報 久しぶりにテーマ「ShapeShifter」の更新です。主な更新箇所は以下のとおりです。 エラーの修正 テンプレートファイルの追加 スタイルの追加 スライドバーとモバイル用のスライドバーの表示・非表示設定の改善（ダブらないように）。 スライドバーのボタンを追加といった感じです。また、僕はCSSが未だに苦手で、最近ボディにIDを付けるのは良くないと教えて頂き、クラスの値に設定変更しましたの テーマ「ShapeShifter」バージョン1.1.0の更新情報 ※ 念のためプラグインの方から更新をお願い致します。さて、また懲りずにアップロードもしました。今回からはプラグインがなるべくテーマのコードに依存しないようにしていきたいので、出来る限りコードは分離していく予定です。また、完全にアップロード用にしていくので、なるべく機能性を減らしてプラグインに移動させていくつもりです。前回のバージョンから随分変更しており、ウィジェットエリアの標準設定も少しばかり変更 プラグイン「Magic Template Holder」を利用いただき有難うございます 僕の知らない内にプラグイン「Magic Template Holder」のアクティブインストール数が100を超えていました。ええ、それだけなんですが、私は自分が使いたい機能を作成しただけなもんですから、同じような機能を選んでいただいて共感いただけていると判断できて嬉しかったです。ニッチな機能なんで、機能的にどう改良するべきか自分でもよく分かりませんが、ご意見ご提案等有りましたら、能力的に僕の出来る テーマ「ShapeShifter」バージョン1.0.80の更新の注意点 またテーマの更新を行いますが、今回はファイルの配置を大きく変化させます。注意点としては、現在プラグイン「WP Theme ShapeShifter Extensions」を有効化している場合、テーマの更新の前に必ず先にプラグインをバージョン1.0.68以上の最新版に更新してください。プラグイン側では、テーマのバージョンが指定された最新版1.0.80以降でないとコードが読まず、停止している状態と同じ プラグイン「WP Theme ShapeShifter Extensions」バージョン1.0.6... 現在レビューがまた始まっていて、まだ確定していないのでなんとも言えないのですが、プラグインを修正したテーマに合わせて更新しています。注意点が有りますので、一応大きく書いておきます。絶対に先にテーマ「ShapeShifter」を更新しないでください！テーマに要求されないもの、というよりはレビュアーと話して機能（主にテーマカスタマイザーとスタイル関連）のコードを幾つかプラグイン側に移動させ、それに伴っ WooCommerce 3.0.5に更新すると商品属性タイプがテキストになる問題 最近ヤフーストア用の商品情報・在庫同期のプラグインを作ろうとしていますが、CSVファイルのアップロードが上手く行かず、ヤフーに問い合わせたところ現在調査中だそうですので回答待ちの状態です。で、最近４月末にWooCommerceの3.0.5がリリースされていましたので、僕も最新版に対応したプラグインを作りたいもんですから、すぐに更新したんですよ。すると商品の属性タイプ（選択・テキスト）の設定が反映さ ワードプレスのテーマやプラグインを翻訳ファイル編集ソフト「Poedit」でローカライズ（翻訳）する... 翻訳 ローカライズ今までは日本語のみだったんですが、英語から各言語に翻訳表示できるようにしました。漸くテーマ「ShapeShifter」の翻訳が終わりました。「バージョン1.0.3」が翻訳済みです。日本語で見ると日本語表記が若干変化していると思いますが、実質何も変化していません。完全に公式リポジトリ用です。僕自身最初は日本語でのみ配布するつもりでしたが、後からローカライズ対応にしようと編集すると実 追加したダッシュボードウィジェットを強制的に一番上に表示させる方法 ダッシュボードウィジェット 配置ダッシュボードウィジェットでは、使い方がわからない時の「ヘルプ」なども載せられますから、テーマにダッシュボードウィジェットを追加する際には、一番上に表示させたい時も少なくない筈です。そして、実は「ダッシュボードウィジェット API - WordPress Codex 日本語版」にダッシュボードウィジェットを一番上に表示させる方法が載っているのですが、それとはちょっと 無料で高解像度の画像を探せるサイト「Stock Up」！ その殆どが驚きの「CC0」！ Stock UpWordpressブログやサイトに限らず、ロゴ画像を一新するだけで印象が随分異なって見えますよね。ただ、画像を無料でダウンロードするにも、クレジットの表示義務があるなど何かしらの制限が付き纏うことが少なくありません。そうなると自分のブログやサイトを画像でイメチェンするにも、悩んでしまいませんか？「CC0の高画質な画像」をダウンロードできる「Stock Up」という画像検索サイトがあ ショートコードの作成・追加方法 非常に便利なワードプレスのショートコードですが、自分のオリジナルショートコードや編集が簡単にできるのをご存知でしょうか？ショートコードを自動で挿入してくれるプラグインも多く存在し、「Shortcodes Ultimate」といった非常に便利なプラグインも存在しますが、自分である程度自由に作成できるようになっておくと更に柔軟かつ効率の良いコンテンツ作成が可能になります。ここではそんなワードプレスの基 出力例としてはこんな感じで、上が「サムネイル付き新着記１０件」で、下は「”キーワード”で10件検索でランダムソート」です。 HTML HTMLを直接入力する事ができます。ビジュアルエディタ上にコピペしたい場合に重宝します。 広告やYoutubeのエンベッドコードを直接ペーストするなどが良い例でしょう。 B!