アーカイブウィジェットに折り畳み機能をつけました。
以下で、この機能を利用する方法を紹介します。
折り畳み機能の使い方
折り畳み機能は、Simplicity2のデフォルト機能にしようと今のところ思っています。（※考え中）
ウィジェットの設置
まず、アーカイブウィジェットが設置されていない場合はドラッグ＆ドロップで設置してださい。
利用できるウィジェットの設定
折りたたみ式アーカイブが利用できる設定は、通常リストに投稿数を表示させている時と
デフォルト状態のアーカイブ設定の時のみです。
利用できないウィジェットが設定
以下のように「ドロップダウン表示」にチェックが入っていると、利用できない仕様になっています。
参考
詳しい仕様は以下を参照してください。
今回は、Wordpressアーカイブウィジェットのリスト表示を、プラグインを必要とせず、コピペのみでスッキリと…
なお、この機能は、Simplicityフォーラムにhidekichiさんが書き込まれた、以下のコードを参考にさせていただきました。
参考 Simplicity フッターアーカイブのデザイン案 | codepen
まとめ
これまでのアーカイブウィジェットのリスト機能は、ブログの更新数が多くなるほど、縦に長くなって、使いづらいものでした。
今回の機能追加で、以前よりはウィジェットエリアのスペースを有効に使えるようになるのではないかと思います。
バージョンアップしたのに、折り畳み表示されない場合は、ブラウザを一度リロードするか、それでもうまくいかない場合は、動作不良時のガイドラインに掲載されているキャッシュの削除を行ってみてください。
コメント
アーカイブウィジェットに折り畳み機能、ありがとうございます。
アーカイブ部分がすっきりしました。
アーカイブは、訪問ユーザーが使うというより、管理者がどれだけ記事を書いたか確認するためのものだったりするので、表示はこれくらいで良いのかもしれませんね。
「カテゴリー」の折り畳みにも対応して頂けないでしょうか？
カテゴリーも長くなってしまい現在はドロップダウンを使用しているのですが、この折りたたみ形式のソースの方がSEO的に有利っぽい気がします。
どうかご検討下さい。
カテゴリも一応検討はしたのですが、カテゴリの場合は、アーカイブとは違い、折りたたまずに表示したい需要もあると思い、とりあえずは、そのままになっています。
アーカイブもそのまま表示したい人は一定数いるとは思いますが、少数と思ったので機能追加しました。
カテゴリーに関して、僕の当初の考えは、アーカイブと違い、共通部分(アーカイブの場合は「年(西暦)」)が無いため、親カテゴリーにもリンクにも入っているというのが問題点になり、開閉すること自体は別に難しくはないんですけれども、どういう仕組みが良いのか思いつかなかったというのが大きな理由です。
開閉ボタンを別途作るというのも方法です。そのボタンがあれば子カテゴリーがあるということなので。
なので実装の手段としては、子カテゴリーがあるものには開閉ボタンを追加して子カテゴリーを閉じるって感じでしょうか。
開閉ボタン自体は何も特別なものでなくても良いと思うんですけれども、僕的には親カテゴリのリンクに飛びたいのか、子カテゴリを開きたいのかをうまく表現できるUIみたいなものができないかなぁと考えてはいます。
ちょっとやってみましたが
Simplicity フッターアーカイブとカテゴリーのデザイン案 | codepen
こんな感じでしょうか。
>Hidekichi様
実現して下さり感謝致します。
ドロップダウン表示のHTMLソースよりも折り畳み式のソースの方がSEO的に優れていると思うので嬉しいです。
Hidekichi様の他のトピのアイディアもいつも参考にさせて頂いています。
ありがとうございます。
>わいひら様
ユーザーの好みに応じてカテゴリーを「普通の表示」「折り畳み表示」「ドロップダウン表示」を選択可能にはできないのでしょうか？
ご検討よろしくお願い致します。
hidekichiさんの折り畳みカテゴリ、素晴らしい作りですね。
機能として、選択できるようにするというのは、僕も考えたのですが、ウィジェット設定画面のカテゴリウィジェット内に、設定を追加する方法（PHPでフックする方法）が、よくわからないんです。
テーマカスタマイザーに、設定を置くのはなんか違う感じがします。（ウィジェットの設定をカスタマイザーに置くのはわかりにくくなるので）
何か良い方法をご存知であれば、機能追加しますよ。
wp-includes/widgets/class-wp-widget-categories.phpを覗いてみたら、widget_categories_dropdown_argsを使えばいいのかな。
後で詳しく、調べてみないとちょっとわからないけど。
時間がある時に、出来そうならするかもしれません。
これよく見たら全然違った。
>わいひら様
それでは機能追加ではなく、寝ログの方でわかりやすくご紹介頂けないでしょうか？
(折り畳み式アーカイブウィジェットの紹介記事のような感じで。)
僕のWEB知識は十数年前で止まってしまっているのでHidekichi様の高尚なコードを試みましたが、とても敷居が高いです。
あえて、カスタマイズでする意義はなんでしょうか。
というのも、カテゴリ系の折り畳みは、プラグインが豊富にあります。
hidekichiさんのコードを適用できない場合は、プラグインとかではダメなのでしょうか。
wordpressのローカル変数で、snsのajaxの時みたいに、何かしらの値がブーリアンで出力できるなら、拾えると思うんですけれど。
中身は何でも良いです。undefined以外なら処理とかもできますし。
多分配列のオブジェクトですよね、アレ。
if (scale_swith.category){…}
if (scale_swith.archive){…}
みたいな感じで行けそうな気が。
(function($){…})(jQuery)ってのも、即時関数で$=jQueryってしてるみたいなもんですから。
ただ、ローカル変数で出力できた場合は、グローバル変数になると思うので、即時関数の中でも使えるんではないかなぁと思います。
wp_localize_scriptでしたっけ？
header-javascript.phpあたりにあったやつ。あれとか使えそうですけどね。
javascriptファイル自体は、設定する変数がどこから来てるのかわからないのでlintでwarningを吐くと思いますが、snsのajaxでいけてるんで、まぁイケるんじゃなかろうかというぐらいの話ですが(笑)
wordpressのローカル変数で、snsのajaxの時みたいに、何かしらの値がブーリアンで出力できるなら、拾えると思うんですけれど。
中身は何でも良いです。undefined以外なら処理とかもできますし。
多分配列のオブジェクトですよね、アレ。
if (scale_swith.category){...}if (scale_swith.archive){...}
みたいな感じで行けそうな気が。
(function($){…})(jQuery)ってのも、即時関数で$=jQueryってしてるみたいなもんですから。
ただ、ローカル変数で出力できた場合は、グローバル変数になると思うので、即時関数の中でも使えるんではないかなぁと思います。
wp_localize_scriptでしたっけ？
header-javascript.phpあたりにあったやつ。あれとか使えそうですけどね。
javascriptファイル自体は、設定する変数がどこから来てるのかわからないのでlintでwarningを吐くと思いますが、snsのajaxでいけてるんで、まぁイケるんじゃなかろうかというぐらいの話ですが(笑)
JavaScriptに何かしらの値を渡すことはできるんですが、どういった設定値を渡すんでしょうか？
scale_swithって変数名(仮)にcategoryとarchiveというパラメータを作り、それが各々true/falseであれば(これがカスタマイザーの設定のon/off)、
jQueryで、if (scale_swith.category === “true”){カテゴリの処理}みたいにイケるんじゃなかろうかと思ったんですけど、どうなんでしょうね(笑)
結局jsonみたいな感じと理解してるんですが違いましたかな？
言うなれば、
var scale_swith = { category:”true”, archive:”false” };
みたいなものかと思ったりしてたんですけども。
確かに、カスタマイザーに設定を置けば手軽に、できるとは思います。
けれど、ウィジェットの設定を、カスタマイザーに置くのがなんだか気持ち悪くて。（ややこしい設定になるので）
ただ、カレンダーのスタイルの設定は、置いちゃっているので、今更ではありますが。
ウィジェットに設定を追加するとしたら、デフォルトのカテゴリウィジェットのclassを継承して追加するしかないっぽいです。
ただ、そこまでするのも面倒くさいので、カスタマイザーに設定を追加するのが実装コスト的に無難なような気もしないでもないです。
そこら辺で、今悩んでいます。
まぁ簡単なのは、カスタマイザーに設定があれば該当するwidgetのulにclassを追加するのが最も簡単かと思います。これならカスタマイザーの設定から有る無しを判別して追加なのでどちらかといえばスムースに思います。
#sidebar.widget-category
(ul).scale
だったら、
$(“#sidebar .widget-category .scale”).length
で判断できます。
> カスタマイザーに設定があれば
カスタマイザーのウィジェットの画面で設定って感じです。そのまま読んだらまたカスタマイザーやんって話なので(笑)
すいません、いまいちどういった設定仕様なのかが理解できてません。
カスタマイザーのウィジェットの画面での設定ってこれのこと？ですよね。
それです。つまりは、「デフォルトのカテゴリウィジェットのclassを継承して追加するしかないっぽいです。」ですね。
しかし逆を言うと、.widget_archiveやcategoryの子要素にselectがなければ発動でも良いような気もしますよね。って事はカスタマイザーの設定は必要ないと思ったりも。
そうなるとスクリプトの見直しがちょっと必要かも知れませんね。
“selectがなければ発動”にしてしまうと、「そのまま表示」したい人が困るかなと思いまして。
というか、僕の場合は、まだそのまま表示させていたい感じです。このサイトの場合、全然カテゴリが多くないので。
アーカイブと違って、ウィジェットは、「そのまま表示」したい人も、結構いると思うので、良い方法を模索中です。
今のところは、やっぱりPHPのclassを継承してやるのがスッキリした方向なのかも。