WordPress 有効期限やカテゴリー指定機能付きのテキストウイジェット作成

標準のテキストウイジェットを機能アップして、有効期限やカテゴリー指定等の条件設定を行うことが出来るテキストウイジェットを作成しました

前回の記事でウイジェットタイプのプラグインの作り方を紹介しましたが、もう少し実用的なものを作ろうということで検討したところ、有効期限を設定できるものが意外と見当たらなかったので、とりあえず次の5つの機能を持たせたテキストウイジェットの作成を行います (^^)

  1. タイトルの出力を禁止出来ること
  2. 有効期限が指定出来ること
  3. カテゴリーやポストIDで対象を指定出来ること
  4. 条件が一致しない場合の代替テキストを設定出来ること
  5. script タグの処理をフッター部へ移動出来ること

テキストウィジェットに広告コードやソーシャルボタン等を貼り付けた時にこんな機能があればいいなというものを実装してみました

SnapCrab_NoName_2013-5-9_18-9-0_No-00

簡単に使い方説明します

タイトル

表示させない場合は単に空欄にすれば良いだけなのですが、空欄のままだと管理画面上でウィジェットの設定画面を閉じた状態だと区別がつかずわかりにくいので、管理上は表示したいけどブラウザへの出力はしたくないという場合等に「隠す」をチェックします

有効期間

開始日と終了日を設定出来ます。開始日のみ、あるいは終了日のみを指定することも可能です。その場合は指定しない方は空欄のままとします。
ちなみにブラウザにより HTML5 の input type=date のサポート状態が変わりますので、Chrome ならカレンダー形式で設定が可能ですが、対応していないブラウザの場合は yyyy-mm-dd 形式で入力する必要があります

選択タイプ

記事のカテゴリーやポストIDを指定した場合に、それを対象として含む除外するのかを指定します

例えば、含むとした場合は、指定したカテゴリーやポストIDの記事ページを表示した時のみ条件一致時のテキストを出力します。一致しなかった記事ページ(何も対象を指定していない場合を含め)及びホームやアーカイブページ等では、不一致時の代替テキストが出力されます

除外するとした場合には、指定したカテゴリーやポストIDの記事ページを表示した時のみ条件不一致時の代替テキストを出力します。一致しなかった記事ページ(何も対象を指定していない場合を含め)及びホームやアーカイブページ等では、一致時のテキストが出力されます

含めるとした場合のほうが直感的にわかると思いますが、除外も便利なので慎重に使い分けて下さい

カテゴリー

条件判定する対象のカテゴリーをチェックボックスで指定します

Post ID

条件判定する対象の投稿記事や固定ページをカンマ区切りで指定します
投稿記事や固定ページのポストIDは、管理画面の固定ページ一覧/投稿記事一覧で調べたいリスト位置の項目へマウスを持って行くと画面最下部に表示されるデータにIDが含まれています

条件一致時のテキスト

有効期間やカテゴリー等の条件が一致した時に出力する任意のテキストやHTMLを設定します

条件不一致時の代替テキスト

有効期間やカテゴリー等の条件が一致しなかった時に代替出力する任意のテキストやHTMLを設定します

自動的に段落追加する

標準のテキストウィジェットにもある pタグを自動的に付加する機能です

script タグを抜き出してフッター部で処理するよう移動

ページ表示の高速化とJavascript の実行タイミングを考慮して、通常は、script タグは、HTML文書のフッター部に記述することが推奨されています
テキストウィジェットに広告やソーシャルボタン等を設置した場合に、そのコード内には JavaScript が含まれていることが多く、また、複数の広告を貼った場合等に同じスクリプトを読み込ませてしまうことがあります。
ここをチェックすると Post6 テキストウィジェットで出力するテキスト内の script タグを抜き出して、同じ scriptタグかどうかチェックしてからフッター部で出力します

注意: 残念ながら、google AdSense は、script タグだけで構成されているのでフッターへ移動すると正しい位置に表示されませんので移動させないで下さい

 

このウィジェットは、Post6WIdgetArea プラグインのバージョン 0.5.0 に入っています。プログラムは、下記サイトから最新版をダウンロードすることが出来ます

http://wordpress.org/extend/plugins/post6widgetarea/

今回もいろいろ勉強になったのですが、そのあたりは別途記事にするとして、今日は使い方の紹介だけです
よろしければ使ってみて下さい (^^)

関連コンテンツ


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss