自作プラグイン/ac

2021-07-07 (水) 04:20:48
ac.jpg

指定した範囲を折りたたんで表示するプラグイン

ac.inc.php
製作者kanateko
ライセンスGPLv3
バージョン1.4
動作確認PukiWiki 1.5.3 ~
最終更新2021-07-07

マルチライン部分を折りたたみ、指定した見出し部分をクリックorタップすることで展開するプラグイン。プラグイン名は "accordion" から。

折りたたみプラグインといえば昔からよく使われるregionプラグインがあるが、これは開閉用の小さなボタンをピンポイントで押さないと動作しないため、より使いやすいものを新たに作成した。

以前にも同じ理由で似たようなプラグイン (expandプラグイン) を作っているが、本プラグインにはページの見出しを使った折りたたみやリスト内、テーブル内での折りたたみといった新たな機能が備わっている。

このプラグインでできること
  • 指定した範囲を折りたたんで表示する
    • 折りたたみ部分の見出しはregionと同様に指定可能
  • ページの見出しを使って折りたたみ表示をする
  • インラインプラグインとしてリストやテーブル内でも使用可能
  • 最初から展開した状態での表示
  • 折りたたんであることを明示する文章を表示できる
  • 複数のアコーディオンを同時に開閉するボタンを表示できる new!
    • ボタンは複数設置可能で、開閉する範囲を制御できる (詳細は後述)

ダウンロード

最新: GitHub

日付バージョン備考
2021-07-071.4
  • 全開閉ボタンの制御範囲の終了位置を作成する機能を追加
  • 全開閉ボタンが連打できた問題を修正
  • 全開閉ボタンにも状態に合わせてクラスを切り替える機能を追加
2021-07-061.3
  • 複数のアコーディオンの開閉を制御する機能 (ボタン) を追加
2021-07-051.2
  • ページの見出しを使用する場合はオプションで指定するよう変更 (元々は自動だった)
2021-07-041.1
  • インライン型を追加
2021-04-021.0
  • 初版作成

インストール

  1. GitHubから「ac.inc.php」フォルダをDLする。
  2. 中の「ac.inc.php」をpluginフォルダへ追加し、「ac.css」の内容をskinフォルダのpukiwiki.cssに加える。
  3. jQueryとFontAwesomeを使うので、pukiwiki.skin.phpの<head>~</head>の間に以下の内容を追加する。
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" >
    
  4. pukiwiki.ini.phpでマルチラインプラグインを許可する。
     define('PKWKEXP_DISABLE_MULTILINE_PLUGIN_HACK', 0); // 1 = Disabled
    
     

cssの内容は最小限の記述のみにしてあるので、装飾やアニメーションなどは各自でサイトに合わせて追加して欲しい。

FontAwesomeを使いたくない場合は::beforeと::afterのfont-familyの指定を削除し、::beforeのcontentを '+'、::afterのcontentを '-' などに変更すればOK。

pkwk2.jpg
配布版の見た目 (デフォルトPukiWiki)

プラグイン設定

PLUGIN_AC_ALT_MESSAGE
altオプションで表示する文章

使用方法

ブロック型

#ac([折りたたみ部分の見出し][,h,open,alt,all,end]){{
折りたたむ内容
}}

インライン型 (リスト内やテーブル内のみ)

&ac([折りたたみ部分の見出し][,open,alt]){折りたたむ内容};
  • 見出しを設定する場合は必ず第一引数として記述すること。
  • 見出しを設定していない場合 (空白の場合を含む) は自動的に "..." になる。
  • hオプションを指定した場合、見出しの内容は無視される。
  • オプションと同じ文字列を見出しにしたい場合は先頭に "~" (チルダ) を入れる。

オプション

h
直上の要素 (兄弟要素) を折りたたみ部分の見出しとして使用する。主にページの見出しを使って折りたたむ際に使用する。インライン型では使用できない
open
折りたたみ部分を開いた状態で表示する。
alt
折りたたんでいる際にその旨を示す文章を表示する。
all
複数のアコーディオンを同時に開閉するためのボタンを表示する。複数設置可能。
設置した位置よりも下にある、同階層のアコーディオンが対象。複数ボタンがある場合は次のボタンまでが対象。
end
allオプションで設置したボタンの制御範囲の終了位置を作成する。一番下まで対象にする場合は特に必要ない。

使用例

ベーシック

#ac{{
この部分が折りたたまれる。
}}
...

折りたたみ部分の見出しを指定する

#ac(詳細を表示){{
必ず第一引数として指定する。
}}
詳細を表示

最初から開いた状態にする

#ac(開いてる,open){{
押すと閉じる
}}
開いてる

押すと閉じる

ページの見出しで折りたたむ

***見出し
#ac(h,alt){{
必ず見出しの真下に置くこと。
ついでに閉じているときにメッセージを表示。
折りたたみに使った見出しは目次にちゃんと表示されるし、見出しごとの編集にも使える。
}}

見出し

リスト内やテーブル内で使用する

インライン型で使う。
注:インライン型はリスト内やテーブル内でのみ使用すること。

--リスト
--&ac(リスト){リスト内でも折りたためる};
--リスト

|&ac{テーブル内でも折りたためる};|
  • リスト
  • リスト
  • リスト
...
テーブル内でも折りたためる

複数のアコーディオンを開閉するためのボタンを設置する

ボタンよりも下にある同階層のアコーディオンが対象。次のボタンがある場合はそこまでが制御の範囲となる。

#ac(all)
#ac{{
︙
#ac(all)
#ac{{
︙
#ac(end) // 必要に応じて設置。ページには表示されない。
ソース全体
 
全て開く
このアコーディオンは1つ目のボタンで開閉されます
このアコーディオンは1つ目のボタンで開閉されます
このアコーディオンは1つ目のボタンで開閉されます
全て開く
このアコーディオンは2つ目のボタンで開閉されます
このアコーディオンは2つ目のボタンで開閉されます
このアコーディオンは対象外です

追加したい機能など

  • 全開閉を終わらせるためのオプションが欲しいかもしれない。 v1.4で追加

余談

hオプションの仕様について

インライン型について

コメント

最新の10件を表示しています。 コメントページを参照

  • 201行目以降からエラーを吐いていて使い物になりません。残念。 -- 1.04 2021-07-07 (水) 16:04:28
    • どのようなエラーが出ていますか?デフォルトの状態のPukiWiki1.5.3、PHP7.4.1の環境では特にエラーが確認できていないため、PukiWikiのバージョンとPHPのバージョンも教えていただけるとありがたいです。 -- kanateko 2021-07-07 (水) 18:12:50
    • 一応デフォルト状態のPukiWikiと配布版を使ったサンプルサイトを用意してみました。https://jpngamerswiki.com/_sample/ -- kanateko 2021-07-07 (水) 21:10:39