11月 | 2020 | ロクエヒロアキオンライン

VS. Wordpress レイアウト崩れは馬車などに乗らずに

WordPressのサイドバーに月別アーカイブを設定したのはいいが、月をクリックして一覧ページに飛ぶと、なぜか右寄せになってしまうという問題が発生している。通常のページではこの問題は起こっていないことから、何か月別アーカイブに関するところで、悪さがなされていることは容易に思料された。

とりあえず状況を整理しておこう。書き加えた記述は以下のとおりだ。まず、sidebar.phpに、

<details>
<summary>MONTHLY ARCHIVES</summary>
<ul class=”ul-sb”>
<?php wp_get_archives(‘show_post_count=1’); ?>
</ul>
</details>

つづいて、function.phpに、

//記事数をリンク内に表示
add_filter( ‘get_archives_link’, ‘my_archives_link’ );
function my_archives_link( $output ) {
$output = preg_replace(‘/<\/a>\s*( )$(\d+)$/’,’（$2）</a>’,$output);
return $output;
}
//

以上である^（註１）。

まず、筆者が疑ったのは、出力先ページが必要なのではないか、ということだ。すなわち、月別アーカイブは、archive.phpではなく、何か別のphpファイルを参照して反映されるものであるという――。そのファイルの不在が、斯様な事態を招いているのではないか？

Google検索を利用した調査の結果、どうやらdate.phpというphpファイルが必要なのではないか、という結論に至り、archive.phpをコピーし名前をdate.phpに変え、テーマ内にアップロードした。しかし、これによる効果はなかった。

次に筆者が目をつけたのは、rtl（right to left）に関する記述が悪さをしている可能性である。なにかが原因で、rtlに関わるcssを読み込んでしまっているのではないか？　しかし、当サイトでは、アラビア語など右から左へ読む系の言語は使用しておらず、今後も使用の予定はない。幸いにして、rtlに関わるcssは削除してもよい^（註２）と読める記載を発見、早速実行に移した。しかし、これによる効果はなかった。

次に筆者が行ったのは、あまりにも大胆で端的な方策であった。すなわち、date.phpのページ全体を<div align=”left”>でくくるというものである。なるほど、これには確かに効果が見られた。しかしながら、これは、二階堂奥歯の言葉を借りれば、〈問題を解決するのではなくて解消する〉^（註３）手法ではないのか。あるいは、効果が確実に認められる治療ではなく、対症療法である、と言ってもいいが。

こんなんでよいのだろうか？　しかし筆者は、これでよしとすることにした。いわゆる、「今後の課題としたい」というやつである。解決策をご存知の方におかれましては、ぜひ筆者までご連絡いただきたいが、近々に自身の力で解決するには限界があると判断した。白鳥も、水面上での端麗さとは裏腹に、水面下では必死でばた足をしていると聞く。すなわち？　ソースはともかくレイアウトがある程度理想通りになれば、あきらめも肝心だ、ということだ。

なお、本稿のタイトルは、言うまでもなく横光利一「春は馬車に乗って」のもじりである。現代日本において想定される「馬車に乗ってくるもの」はなにほどか優雅さの伏線を張るが、サイトの意図しないレイアウト崩れは、そういう情緒とはおおきな懸隔がある、という「意図」を込めた。「春は馬車に乗って」というテクストを愛する方々は、どうぞご寛恕願いたい。

註
（註１）　sidebar.phpおよびfunction.phpの記述事項については、「【WordPress】月別アーカイブ一覧で、投稿数を表示する方法」（https://recooord.org/wordpress-archives-month/）を参照した。（二〇二〇年一一月二四日閲覧）
（註２）「WordPressの不要なファイルを全て削除する」https://ecsiter.com/wp_files （二〇二〇年一一月二四日閲覧）
（註３）二階堂奥歯「八本脚の蝶」 http://oquba.world.coocan.jp/notes/oquba005.html （二〇二〇年一一月二四日閲覧）

2020/11/24 09:14

VS. Wordpress

とある企業のHPを想定していただきたい。シンプルなつくりのHPである。メニューは4つくらいぽんぽんぽんと並ぶばかりで、コンテンツは一見、それ以上でも以下でもないように見える。けれども、たとえばあなたがその企業に就職を志すわかものであり、会社概要を知るべく、「ABOUT」のボタンをクリックすると、ふいにその下に「企業理念」「グループ企業」「沿革」「アクセス」などへの隠れていたリンクがあらわれる。もはやそういうサイトは、決してめずらしいつくりのものではない、と言っていいだろう。

「隠しメニュー」と筆者は呼んでいたが、それには「アコーディオンメニュー」乃至は「折りたたみメニュー」という「正確な」名前があるらしい。外観がすっきりしていいよね、アコーディオンメニュー。というわけで、これを弊サイトにも実装すべく、筆者はGoogle検索の小窓をたたいた。

まず、非常に多く見られたのが「jQueryを使ってアコーディオンメニューをつくる」というものだった。しかし筆者はhtmlを多少齧ったことがある程度で、phpは、スープになぞらえるならスプーン約半分にも満たない量をおそるおそる啜った程度にすぎない。腹がくちくなるどころではないのに、「じぇーくえりー」などというものを使うのは、少々以上に骨が折れる作業になることが予想された。（なお、まったくの余談であるが、筆者はいまだにGitHubがいかなるものなのか理解していない。）

けれども、検索結果のなかには、「htmlとCSSだけでアコーディオンメニューをつくる」というものも散見された。それなら、わからないでもない。まあ、多少は。htmlを利用したホームページならこれまでもつくっていたし。そういうわけで、そのうちのいくつかを試みてみた。なぜ「ひとつ」ではなく「いくつか」か？　サイトの記述のとおりにhtmlおよびCSSを作成したつもりであるのに、アコーディオンメニューの完成がかなわなかったからであることはいうまでもない。

筆者は敗北した。Wordpressとの闘いに敗北に敗北を喫した。もうここは撤退のラインではないか――そんなときに筆者は、偶然ひとつのサイトに至りつく。それが、「1行で書く！折りたたみメニュー！！」というサイト^（註１）であった。当該サイトの記述を鵜呑みにすれば、htmlで、<details>というタグで「くくるだけで」、簡単にアコーディオンメニューができちゃうよ、とのこと、そんなうまい話があるのか？　半信半疑で筆者は、サイドバーに以下のような文字をつづった。

<details>
<summary>ABOUT</summary>
このサイトについて
</details>

なお、「以下のような」とあるように、筆者がつづったのが「このサイトについて」だったのか「ロクエヒロアキについて」だったのか、はたまたそれ以外の文言だったのかは、一切記憶にない。もちろんこれは枝葉末節なのだから、筆者の記憶にないことなどなんの問題にもなりはしない。ともかく筆者は、おそるおそる「ABOUT」にカーソルを合わせ、クリックした。

あれ、できちゃった。

そう、二〇二〇年ともなれば、「じぇーくえりー」などのお力を借りなくても、隠しメニュー、失礼、アコーディオンメニューの作成はできるのである！　ただし、IEなどにおかれましては非実装らしいが、筆者が使っているブラウザはGoogle Chromeなので、なんら問題はないと言っても過言ではない。

というわけで、アコーディオンメニューのサイトへの実装をお考えの方は、detailsおよびsummaryタグを使うのがおすすめだ。ちなみにリンク付きのリストも無事格納できたし、なんかクリックすると文字の周りに出てくる変な枠線も、CSSに、

details > summary {
border: none;
list-style: none;
margin: 0;
padding: 0;
outline: none;
}

と記載することで削除できる^（註２）。

アコーディオンメニュー、導入したいけどむずかしそう……と二の足を踏んでいた方は、ぜひ<details>タグをお試しいただきたい。

註
（註１）詳細は、「1行で書く！折りたたみメニュー！！」https://qiita.com/kobotyann/items/c8f85f88f8ba39a34932 （二〇二〇年一一月二四日閲覧）
（註２）詳細は、「<details>: 詳細折りたたみ要素」https://developer.mozilla.org/ja/docs/Web/HTML/Element/details をご参照のこと。（二〇二〇年一一月二四日閲覧）

2020/11/24 02:51