タグ: shortcode

Flexible Accordion

とりあえず2つ目を作ってみました。
今は単なるトグルスイッチの集まりだけど、お互いをリレーションさせることでアコーディオンっぽくもできる。
そんなようなプラグインを目指してます。

ダウンロード

flexible-accordion-0.2.zip

インストール

解凍してpluginsディレクトリにコピーしてください。

使用方法

トグルのスイッチになるテキストを[ fa_title ]で、開閉したい部分を[ fa_content ]で囲んでください。
複数設置することができますが、[ fa_title ] と [ fa_content ] を関連付けるためにそれぞれに同じ[ name ]をつけてください。
[ name ]を省略すると上から順番に対応づけようとします。
すべてのアコーディオンを開閉するスイッチが欲しい場合は[ fa_switch ]を設置してください。

使用例

  • アコーディオン本体
    • パターン1
      一つのタイトルとテキストをトグルしてみる。
      [ fa_title name=hoe ] hoehoe [ /fa_title ]
      [ fa_content name=hoe ] hoehoe の 中身だよ [ /fa_content ]

      hoehoe
    • パターン2
      デフォルトでテキスト部分を開示しておく
      [ fa_title name=hoe2 ] hoehoe [ /fa_title ]
      [ fa_content name=hoe2 status=open ] hoehoe の 中身だよ [ /fa_content ]

      hoehoe2
      hoehoe2 の 中身だよ
    • パターン3
      タイトル部分とテキスト部分の間に別のコンテンツを入れる
      [ fa_title name=hoe3 ] hoehoe3 [ /fa_title ]
      タイトルとテキストの間に別の文言が入っていても動作します。
      [ fa_content name=hoe3 status=open ] hoehoe3 の 中身だよ [ /fa_content ]

      hoehoe3
      タイトルとテキストの間に別の文言が入っていても動作します。
      hoehoe3 の 中身だよ
  • すべてのアコーディオンをトグルするスイッチ
    [ fa_switch ]

    ALL OPEN

更新履歴

  • 0.2(2012/09/11)
    • すべてのアコーディオンを開閉させるスイッチを追加
  • 0.1(2012/09/07) flexible-accordion-0.1.zip
    • とりあえず作成

ToDo

  • 管理画面の作成
  • CSSを改変できるようにする
  • それぞれのトグルを連携させて「どれか一つだけ開いている状態」を可能にする
  • _eで出力しているところとベタで記入しているところがごっちゃになっているので統一する
  • 併せて日本語ファイルを作成する
  • 脆弱性対応

Expiration Notice

とりあえず作ってみました。
「掲載期間が過ぎたものを下書きに戻す(見えなくする)」
ではなく
「掲載期間が過ぎたものは、情報が古くなっている旨の警告を出す」
プラグインです。

ダウンロード

expiration-notice.0.3.1.zip

インストール

解凍してpluginsディレクトリにコピーしてください。

使用方法

有効期限を表示したい場所に[ exp_notice ]のショートコードを書き込んでください。

設定画面

管理画面の「設定」 → 「Expiration Notice」で設定画面を開くことができます。
デフォルトの有効期限や表示するときの文言、CSSのカスタマイズができます。

使用例

  • 引数を指定しない場合
    管理画面で指定したデフォルトの期限内まで有効になります。

    • ↓ [ exp_notice ]
      このページの有効掲載期限は 2013/04/29 11:33:46 までです。
      記載されていることの正確性を確認ねがいます。
  • 引数を相対値で指定した場合
    [y, m, d, h, i, s]の各値を指定することで更新日時からの相対日時を有効期限として設定することができます。

    • ↓10年後まで有効 [ exp_notice y=10 ]
      このページは 2023/02/28 11:33:46 まで有効です。
    • ↓10秒後まで有効 [ exp_notice s=10 ]
      このページの有効掲載期限は 2013/02/28 11:33:56 までです。
      記載されていることの正確性を確認ねがいます。
    • ↓1年1ヶ月1日 1時間1分1秒後まで有効 [ exp_notice y=1 m=1 d=1 h=1 i=1 s=1 ]
      このページの有効掲載期限は 2014/03/29 12:34:47 までです。
      記載されていることの正確性を確認ねがいます。
  • 引数を絶対日時で指定した場合
    [limit]に日時を指定することで絶対日時を有効期限として設定することができます。

    ※ 0 ~ 9 までの数字と「/(スラッシュ)」「-(マイナス)」「:(コロン)」「_(アンダーバー)」「 (スペース)」のみ使用することができます。全角文字は使用できません。
    ※「年」は4桁、「月日時分秒」は2桁で記述しなくてはなりません。
    ※日付と時刻の間にスペースを含んでいる場合、ダブルコーテーションかコーテーションで囲む必要があります。
    ※日付指定を省略した場合、自動的に更新日当日が割り当てられます。
    ※時刻指定を省略した場合、自動的に 23:59:59 が割り当てられます。
    ※以下のように記述することもできます。
    “2020-12-31 23:59:59” … 日付の区切りをスラッシュではなくハイフンで記述する
    2020-12-31_23:59:59 … 日付と時刻の区切りをスペースではなくアンダーバーで記述する
    20201231_235959 … 日付と時刻の区切りのみをアンダーバーで記述する
    20201231235959 … 日付、時刻に区切りをつけず記述する
    2022/01/01 … 日付のみを記述する
    20220101 … 日付のみを区切りをつけず記述する
    23:59:59 … 時刻のみを記述する
    235959 … 時刻のみを区切りをつけず記述する
    • ↓2020/12/31 23:59:59 まで有効 [ exp_notice limit=”2020/12/31 23:59:59″ ]
      このページは 2020/12/31 23:59:59 まで有効です。
    • ↓2022/01/01 23:59:59 まで有効 [ exp_notice limit=2022/01/01 ] [ exp_notice limit=20220101 ]
      このページは 2022/01/01 23:59:59 まで有効です。
    • ↓更新日当日の 23:59:59 まで有効 [ exp_notice limit=23:59:59 ] [ exp_notice limit=235959 ]
      このページの有効掲載期限は 2019/11/13 23:59:59 までです。
      記載されていることの正確性を確認ねがいます。

更新履歴

ToDo

  • いつから有効、という指示もしたい。引数が2つになる点は了承済み
  • _eで出力しているところとベタで記入しているところがごっちゃになっているので統一する
  • 併せて日本語ファイルを作成する
  • 置き換えパターンのフォーマットを設定できるようにする(現状は固定フォーマット)
  • 脆弱性対応

WP UI – Tabs, Accordions, Sliders

WP UI – Tabs, Accordions, Sliders
機能が満載。
コンテンツ内にTABコンテンツを搭載する機能。普通に文章を書くだけでなく、他のPOSTや固定ページを引っ張ってくることもできる。

[ wptabs style=”wpui-achu” ]


TAB


TAB機能。
[ Wrap tabs ]ボタンで概要を作成し、[ Add tab ]ボタンでタブを追加していく。
styleを40種類ぐらいから選択することができる。
ここで使っているのは「wpui-achu」。

Accordion


[ wptabs ]に「type=”accordion”」を指定することでアコーディオン形式にすることができる。

Spoiler


[ wptabs ]とは別に[ wpspoiler ]がある。
[ wpspoiler name=”Spoiler Test1″ ]Spoiler Test 1[ /wpspoiler ]
のようにwpspoilerで囲むことでアコーディオンの単発版を出すことができる。
openオプションにtrue/falseを指定することで初期状態を開いている/閉じている、それぞれを指定することができる。
デフォルトはfalse。

Spoiler Title 1

Spoiler Content 1

Spoiler Title 2

Spoiler Content 2


Dialog


[ wptabs ]とは別に[ wpdialog ]もある。
これをコンテンツのどこかに書いておくことでページを開いた時に画面中央にダイアログを出すことができる。
出せるのはJavaScriptでいうところのAlert。Confirmではない。
このページを開いた時に出てきたアラートのshortcodeは

[ wpdialog title="alert" show="drop" hide="explode" ] wpdialogを使用することでアラートを出すことができます。 [ /wpdialog ]


Feeds


[ wptabs ]とは別に[ wpuifeeds ]もある。
[ wpuifeeds url=”http://feeds.reuters.com/reuters/JPTopNews?format=xml” number=”1″ ]
このように書くことで指定URLからのfeedをnumber分だけ受けることができる。

その他注意事項


[ wptabs ]を多重化して設置することはできない。
Crayon Syntax Highlighterとの相性があまり良くない。
SyntaxHighlighter Evolvedは今のところ問題なさそう。

[ wptabs type=”accordion” style=”wpui-achu” effect=”fade” mode=”virtical” ]


Accordion Test 1

Accordion Test 1

Accordion Test 2

Accordion Test 2

Reuters News Feed

ユーロ圏鉱工業生産、9月は予想に反して小幅増加

ユーロ圏鉱工業生産、9月は予想に反して小幅増加

欧州連合(EU)統計局が発表した9月のユーロ圏鉱工業生産指数は、前月比0.1%上昇した。市場の予想(0.3%低下)に反して8月(0.4%上昇)に続き2カ月連続の上昇となった。7月の0.5%の低下を相殺した格好だ。ドイツやイタリアの落ち込みをフランスやオランダの増加が補った。

Read More...


wpdialogを使用することで
アラートを出すことができます。

掲載期限を過ぎたらアラートを出す(用済み)

※ 2012/08/27 追記
プラグイン形式でつくりなおしました。
>> Expiration Notice <<
なので、この記事は用済みです。作成方法の詳細はこちらの記事に書きました。

クライアントからの要望は
「掲載期間が過ぎたものを見えなくする」
ではなく
「掲載期間が過ぎたものは、情報が古くなっている旨の警告を出す(古くてもその情報が生きる場合もあるので、情報自体が存在しなくなることは避けたい)」
ということだったので、下書きに戻してしまうPost ExpiratorSimple Expiresは使えない。
ということで、shortcodeで代用することに。
とりあえずAPIのページを見る。。。
で、書いてみた。こんな?

function katz_expired_alert($atts) {
 if (get_post_type(get_the_ID()) == &amp;amp;quot;page&amp;amp;quot;) {
 $katz_pp = get_pages(array('numberposts' =&amp;amp;gt; 1, 'ID' =&amp;amp;gt; get_the_ID()));
 } elseif (get_post_type(get_the_ID()) == &amp;amp;quot;post&amp;amp;quot;) {
 $katz_pp = get_posts(array('numberposts' =&amp;amp;gt; 1, 'ID' =&amp;amp;gt; get_the_ID()));
 }
 foreach($katz_pp as $val) {
 if ($val-&amp;amp;gt;ID == get_the_ID()) {
 $mod_sep1 = explode(&amp;amp;quot; &amp;amp;quot;, $val-&amp;amp;gt;post_modified);
 $mod_date = explode(&amp;amp;quot;-&amp;amp;quot;, $mod_sep1[0]);
 $mod_time = explode(&amp;amp;quot;:&amp;amp;quot;, $mod_sep1[1]);

$mod_mktime = mktime($mod_time[0],$mod_time[1],$mod_time[2],$mod_date[1],$mod_date[2],$mod_date[0]);

extract(shortcode_atts(array('y' =&amp;amp;gt; &amp;amp;quot;&amp;amp;quot;,'m' =&amp;amp;gt; &amp;amp;quot;&amp;amp;quot;,'d' =&amp;amp;gt; &amp;amp;quot;&amp;amp;quot;,'h' =&amp;amp;gt; &amp;amp;quot;&amp;amp;quot;,'i' =&amp;amp;gt; &amp;amp;quot;&amp;amp;quot;,'s' =&amp;amp;gt; &amp;amp;quot;&amp;amp;quot;), $atts));
 $y = $y !== &amp;amp;quot;&amp;amp;quot; ? $y + $mod_date[0] : $mod_date[0];
 $m = $m !== &amp;amp;quot;&amp;amp;quot; ? $m + $mod_date[1] : $mod_date[1];
 $d = $d !== &amp;amp;quot;&amp;amp;quot; ? $d + $mod_date[2] : $mod_date[2];
 $h = $h !== &amp;amp;quot;&amp;amp;quot; ? $h + $mod_time[0] : $mod_time[0];
 $i = $i !== &amp;amp;quot;&amp;amp;quot; ? $i + $mod_time[1] : $mod_time[1];
 $s = $s !== &amp;amp;quot;&amp;amp;quot; ? $s + $mod_time[2] : $mod_time[2];
 $exp_mktime = mktime($h,$i,$s,$m,$d,$y);
 }
 }
 if (($exp_mktime - $mod_mktime) &amp;amp;lt; 0) {
 $alert_html = '&amp;amp;lt;/pre&amp;amp;gt;
&amp;amp;lt;div class=&amp;amp;quot;expiration&amp;amp;quot;&amp;amp;gt;このページの有効掲載期限は&amp;amp;lt;span style=&amp;amp;quot;color: #ff0000;&amp;amp;quot;&amp;amp;gt; '.date(&amp;amp;quot;Y/m/d H:i&amp;amp;quot;,$exp_mktime).' &amp;amp;lt;/span&amp;amp;gt;までです。

記載されていることの正確性を確認ねがいます。&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;pre&amp;amp;gt;
';
 } else {
 $alert_html = '&amp;amp;lt;/pre&amp;amp;gt;
&amp;amp;lt;div class=&amp;amp;quot;non_expiration&amp;amp;quot;&amp;amp;gt;このページは '.date(&amp;amp;quot;Y/m/d H:i&amp;amp;quot;,$exp_mktime).' まで有効です。&amp;amp;lt;/div&amp;amp;gt;
&amp;amp;lt;pre&amp;amp;gt;
';
 }
 return $alert_html;
}
add_shortcode('expire_date', 'katz_expired_alert');

それぞれのコンテンツには[ expire_date d=60 ]とか埋め込む、と。
shortcodeだと入れたくないところには入れなくていいからフレキシブルだねぇ。

スタイルシートも書かないといけないので

.expiration {
	text-align: center;
	border: solid 1px #ff0000;
	background: #ffe1ff;
	color: #222;
	line-height: 18px;
	margin-bottom: 18px;
	padding: 1.5em;
}
.non_expiration {
	text-align: center;
	border: solid 1px #7aaeff;
	background: #d0f0ff;
	color: #222;
	line-height: 18px;
	margin-bottom: 18px;
	padding: 1.5em;
}

というカンジで入れ込む。
これで期限が来たときは
[ expire_date d=-60 ]
[expire_date d=-60]
期限が来ていないときは
[ expire_date y=10 ]
[expire_date y=10]
というカンジで表示される。
正直、期限が来ていないときは何も表示しなくていいとは思う。