Starlight Ensign

WordPress4.0アップデートに伴うメインメニューの修復

他所でこういう問題が起こった人がいるかは分からないが,自分のところでは起きた問題に対する対策.


症状:メインメニューがうまく表示されず,メニューリストの最上段にあるメニューが自動的にヘッダーに表示されてしまう.

menu2
初期状態だと,「位置の管理」タブがなく,メインメニューの横の(Primary Menu)が無かった.この場合,「イジェール語用メニュー」がヘッダーに表示されてしまう.

対策:

  1. wp_nav_menu()の引数を書き変える.
  2. register_nav_menu()をfunction.phpに追加する.
  3. メニューを更新して保存する.

自分のブログは自作のテーマを使っている.wp_nav_menu()はそのままヘッダーに引数なしのデフォルト状態で配置していた.今まではそれで問題が起きなかったのだが,WordPress4.0に至って仕様変更があったようだ.他のテーマを参考に,< ?php wp_nav_menu(); ?>< ?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>に書き換えた.まず,これで「primaryという場所に登録されているメニューをここに表示せよ」という事をこの関数に伝えることが出来る.

次に,register_nav_menu()関数をfunction.phpに書き加えた.register_nav_menus( array('primary' => __( 'Primary Menu')) );を適当な位置に追加することで,「primaryという場所名を,Primary Menuというメニュー選択画面内の位置として登録せよ」ということになる.

最後に,メニューの更新を行った.
menu2
初めと同じ画像だが,ここの「位置の管理」タブ内に「Primari Menu」というプルダウンメニューが現れている.そこでメインメニューにしたいメニューを選び,配置すればこのSSのような状態になる.そして,何故か一度右の「メニューを保存」ボタンを押さないと,メニューがうまく表示されなかった.これは注意が必要だと思う.


対策は以上でおしまい.コードを書くようなテンプレートになってないのでとても見にくいのはご容赦を.

参考

造語依頼フォーム開設

アージャさんのアリニアを見ていると,造語依頼フォームというものが案外いい感じで造語リストの拡充に寄与しているらしい.なので,自分のところにもつけてみた.

造語依頼フォーム

イジェール語は文法や辞書をはじめとした全てのコンテンツはオープンであるものの,広める為の活動をしていない.なので,そもそも学習者や興味を持ってくれる人の幅が狭く,このシステムがうまく働くかはわからない.とはいえ,やってみなけりゃわからないという側面は大きいので,試験設置してみる.

コメント表示改良

コメントの表示がどうも見づらかったのを改善した.WordPressの標準仕様ではトラックバックやピンバックもコメント同様に表示されてしまうため,いくつかのサイトを参考にしつつ改良した.このサイトには対してコメントもピンバックもトラックバックもないので,コメントとそれ以外をわけることはしなかった.

また,コメントへの画像認証を追加した.Akismetのお陰でスパムは弾かれてはいたものの,どんどんコメント量が増えるのは見ていて気持ちが良いものではない.Akismetはスパムの表示を防いではいるが,投稿を防ぐことはできないので,出口のみの対策となっていた.それを,入り口も防ぐように変えた訳である.画像認証の追加に従って,コメント投稿欄の表示も調整した.

今回参考にしたサイト

細かい修正点としては,プルダウンメニューのselect要素やコメント欄のinput要素に対して,font:inherit;を設定したことも挙げられる.フォント設定は全体に対して行っているのだが,p要素やdiv要素と違って,inheritを明示しておかないとフォント設定がなされていなかったようだ.

viewport設定とメディアクエリによるレスポンシブデザイン

viewportを設定し,スマホやタブレットではタッチに最適化した要素が表示されるようにサイトを修正した.判定基準はユーザーエージェントにおけるデバイス情報ではなく「画面サイズが512px以下か否か」なので,PCでも横幅を狭くすると表示を試すことができる.デバイス情報を用いないことで,新デバイスが登場する度にきちんと表示されるか心配になる必要はない.viwport設定でwidth=device-widthと設定してあるので,大抵のスマホ端末では幅が512px以下に設定されるので,適切に誘導されるはずだ.NexusやKindleでは幅が500px以上あるので,PCサイトと同様の見た目になるはず.

もともとこのサイトはdiv要素やp要素にclassとidを大量に付与して,CSSで見た目を制御していた.そのため,スマホ用サイトを新たに立ち上げるよりは,CSSにメディアクエリを使って制御したほうが楽だ.主に弄ったのは

  • !important 設定によるリンク要素の強制ボタン化
  • floatを設定した要素の幅をそれぞれ100%にすることでサイドバーを下に移動
  • 画面幅が狭い時はトップメニューをfloat化してボタン化することで押しやすく

といったところ.トップメニューは上下のボーダーを上書きした上で,#topMenu ul li で基本的な設定を施し,#topMenu ul li:nth-child(2n)で偶数番目のボタンに対してfloat:right;を設定してある.基礎的なことを組み合わせるだけでも,だいぶわかりやすいサイトは作れるとわかったので良かった.

PHPとCSSの調整

前のスタイルシートはどうにも洗練されていなかったので,各所改修した.初めは既成の他テーマを使おうかと思ったのだが,どれも英文に最適化されていて,日本語でいい感じの見た目になるものが少なかった.特に,漢字はラテンアルファベットに比べて大きくないと判別しにくいという特徴があるので,アルファベットに最適化されたものだとどうにも見難い.かといって,文字サイズを単純に大きくすると,今度は一行あたりの情報量が減りすぎて見難くなってしまう.結局,今までのテーマを改修した方がいいという結論になった.

主な改修点は

  • 番号付きリストと番号なしリストで微妙に表示がずれていたのを調整した
  • サイドバーとメイン部分の境目がわかりにくかったので線を入れた
  • メイン記事部分のマージンを減らして幅を広くして読みやすくした
  • moreリンクや新旧記事へのリンクがわかりにくかったので,大型ボタン化した
  • 新旧記事リンクとページ送りの文言が同じ「新しい/古い記事へ」になっていたので,機能毎に分離した
  • 画像の枠が太すぎたので縮小した
  • タグリンクを枠で囲った
  • サイドバーのタグクラウド領域を縮小した
  • Author情報を常に標示するようにした
  • サイドバーを右側に移動して,記事のほうが目につくようにした
  • 検索結果やタグ機能がうまく動作していなかったのを,きちんと動作するように修正した

特に検索やタグが機能していないのは致命的だったので,早急に修正した.query_postsの動作を理解するまでなかなか時間がかかったが,一度理解してしまえば簡単なもので,arrayで引数をまとめてquery_postにはその配列を引数にしてやれば良いだけだった.この方法なら,新しい分類が増えてもすぐに対応できるので楽である.

しかし,もともと自分がサイトを立ち上げる時に使い出したhtmlとcssを魔改造してWordpressテーマにしてまで使い倒すというのは,なかなか面白いもんだ.もちろん,最初作った時にこんな事になるなんて思ってなかったしね.