WpTHK 2.02 リリース(カスタマイズの組合せによる小バグ修正)
カスタマイズの組合せ次第では発生する小バグの修正です。
アップデートの場合はファイルを上書きした後、以下のどれかを行ってください。
- 既存の「style.min.css」をいったん削除する
- または、カスタマイズ画面で「変更を保存」ボタン押す
- または、カスタマイズ(外観)で「保存して公開」ボタン押す
(自動的に「style.min.css」が再構築されます)
バグ修正
- 「外部 CSS を HTML に埋め込む」の設定にしてる場合、CSS の変更内容がボタン一発で反映されないことのあるバグ修正。
内部最適化・仕様変更
- PHPのバージョンが 5.2 系以下の時は、テーマの使用不可である趣旨のメッセージを表示するようにした。
- 320px 幅のスマホだと 300px の広告が真ん中より 5px 右にズレるので、コンテンツやサイドバーのスマホ閲覧時のパディング値を 左右 5px小さくした。
- ちょこっとだけ内部最適化。
見た目だけの小バグ修正
- 「コンテンツ領域を結合」「コンテンツ領域とサイドバー結合」「パンくずリンクをコンテンツ領域の中」の組み合わせの時、コンテンツ上のパディングの値が入力値より大きかったので修正。
- 「ページャー非表示(または、次のページがない)」「SNS 下ボタン非表示」の組み合わせの時に、中身が空っぽの枠線が出来てしまう現象を修正。
- 「コンテンツ領域を分離」してる時、アーカイブページと検索ページに、ページャーや SNS ボタンを囲む大きな枠線がなくなってたので修正。
- 「コンテンツ領域を結合」した時と「コンテンツ領域を分離」した時のページャー下の余白を(たぶん)見やすいと思われる幅になるよう別々の幅にしてみた・・・。
- 「記事下 SNS ボタン」が非表示の時、不要と思われる?線が表示されてたので、表示しないようにした。
- WpTHK 1.x 系と比較して、トップページ下の SNS ボタンとページャーがスマホ閲覧時に少し狭かったので CSS 修正。
- 4行くらい不要なスタイルが入ってたので CSS 修正。
ディスカッション
コメント一覧
このバージョンでHPを作成して公開しているのですが、
素人なもので調べてみたり、設定をいろいろ変えてみたのですが、
一向に変わらず、どのような設定をするのがいいのか不明です。
状況としては、Facebookのシェアをすると
アイキャッチと違う画像が出てくるのです。
お手数ですが、
ご教授いただけませんでしょうか?
ZEAL さん。
カスタマイズ画面の「Head タグ」にある「OGP 関連」を設定すれば、
投稿画面に「"og:image / twitter:image" の画像」というボックスが出てきます。
そこで、Twitter や Facebook で表示させたい画像を選択できます。
(追記)
本気で迷惑してるので、WpTHK と全く関係のないブログに「質問のコメントを書き込む」という行為は、今後一切やめてください。
その状況で
表示されないので
困っております。
ZEAL さん。
この辺りのページを参考にしてみてください。
https://www.j-cool.co.jp/blog/?p=1674
特に注意したいのは、サムネイルのサイズが小さすぎるとダメというパターンはよくあります。
WpTHK では、例えばアイキャッチで 300px × 300px の画像を設定した場合、
ブログの画面ではカスタマイズ画面で設定されているサムネイルサイズの画像が表示されますが、
og:image は元の 300px × 300px 画像が設定されます。
なべおさん。
WordPress の返信可能限界超えたので、
新しいコメントで返信します。
改善版を当サイトに導入してみました。
いかがでしょう?かなり良くなったと思いますが。
さらに、もうちょっと改善できそうなので、それは次のリリースまでにやります。
色々と修正されたようですね^^
iPhoneでもスクロールできるようになりました!
ちょっと力技な感じは否めませんが、スクロールできないよりは良いと思います。
あと、るなさんも気づいているかもしれませんが、小さなバグがありますね。
次の手順で再現できると思います。
1. PCで、ウィンドウ幅「991px」以下でメニューを展開する。
2. メニューを展開したまま、ウィンドウ幅を「991px」以上に広げる。
すると、すべての子メニューが開きっぱなしになってしまいます。
ただ、このような操作は稀ですけど。。。
なべおさん。
特に力技のようなことはしてませんよ。
・メニューが開いた時は「固定を解除」
・メニューを閉じた時は「再度固定」
してるだけです。
本文を隠してるのは、なべおさんが仰った「開き方がぎこちない」に対応したつもりでしたが、
変ならやめます(今、やめた状態になってます)。
> すべての子メニューが開きっぱなしになってしまいます
これは、Javascript オンリーでメニューを作成すれば簡単に直せます。
Javascript がオフになっている PC にも対応させるために
CSS で作成してるので、そーなります。
当方で作成してる THK Analytics のメニューは Javascript オンリーなので、
こういった現象は発生しませんけどね。
これは WpTHK に限らず、Javascript オフに対応してるテーマならどれも同じですし、
Google Adsense のレスポンシブ広告が、元の大きさや位置に戻らないのと同じ現象ですね。
WpTHK は、なるべく Javascript オフでも見られるようにしてあります。
(Lazy Load すらも、Javascript オフの場合はプレースホルダーが見えなくなるよう対処してます。)
スマホの場合は Javascript オフでのアクセスがないので、メニューの部分だけは開かないですけどね。
るなさん。
なるほど、そういう配慮があるんですね。
> 本文を隠してるのは、なべおさんが仰った「開き方がぎこちない」に対応したつもりでしたが、変ならやめます(今、やめた状態になってます)。
本文は隠した方がいいと思います。
たくさんスクロールした状態でメニューをタップすると、最悪の場合、ユーザーはメニューが開いたことに気づけません。
ですから、本文は隠した方が良いのですが、より自然に見せるため次のような手法を加えてはいかがでしょうか?
1. スクロールしているwindowの高さをJavascriptで取得する。
2. <.head-cover>の高さ(120.8pxかな?)より大きい時は、 <.head-cover>を隠す。
3. <.head-cover>の高さ(120.8pxかな?)より小さい、あるいはゼロの時は、
<#nav>のtopに、その値を返してあげる。
僕のような素人が出しゃばった感じで恐縮ですが、参考になさっていただければ幸いです。
なべおさん。
高速化のために、1文字1行を削る勝負をしてるところに、
「高さ計算」という記述量が増えることはしたくなかったので、
アニメーションによって自然と隠れるようにしてみ申した。
アニメの速度とか、まだ調整してないですけど。
るなさん。
おー!とっても良い感じです!!
次回のアップデートが楽しみです^^
> 高速化のために、1文字1行を削る勝負をしてる
この「志」と「努力」があるから、高機能と高速化を両立できているのですね。素敵です!
これからも陰ながら応援しております。
また気づいた点などあれば、コメントさせていただきますね。
対応ありがとうございました。
素晴らしいテーマです。
とくに「PageSpeed Insights」で、初めて100点を叩き出した時は、本当に感動しました!!
ただ、ひとつだけ修正してほしい点が…。
スマホ(iPhone 6s)で「メニュー」をタップし展開すると、うまくスクロールできず、挙動がおかしくなってしまいます。
改善していただけると助かります。
なべおさん。
メニューのアコーディオンは、ごくごく一般的に使われてる手法で作ってあるのですが、
とりあえず「IOS7・IOS8 は jQuery の click イベントが上手く動かないバグがある」という記事がいくつか見受けられますねぇ。
当方、Android しか持っておらず確認ができないので、
よろしければデバッグに協力してもらえるとありがたいです。
るなさん、コメントありがとうございます。
結論から書きます。
僕は、Xserverを使っているのですが、拡張モジュールの「mod_pagespeed」を切ったり入れたりしていうちに、いつの間にか不具合が無くなってしまいました。
ただ、厄介なことに、mod_pagespeedを「ON」にしても、不具合が再現できなくなってしまい、原因が特定できません。
以下、どんな不具合だったのかを記述しておきますね。
……
1. ページが表示された後、スクロールをして「メニュー」がWindowの上部に達すると、そのまま position:fixed; される。
2. その後、「メニュー」をタップすると、アコーディオは展開するが、うまくスクロールできない。
3. 展開した「メニューリスト」(#gnavi li ul)の背景に、メインコンテンツ(class=”container”)が透けて見える。
4. 頑張って「メニュー」をスクロールしようとすると、下に透けて見えているメインコンテンツの方がスクロールされてしまう。
……
現在、僕のテストサイトの不具合は無くなりました。
(ちなみに、デバイスは iPhone6s/iOS9.3.2 です。)
しかし、https://thk.kanzae.net/wp/ では、現在も「メニュー」の挙動がおかしいままです。
るなさん、もしかしてサーバーに「mod_pagespeed」って導入してますか?
全くの見当違いだったらスミマセン^^;
るなさん、前のコメント訂正します。
原因は「mod_pagespeed」ではないようでした。
申し訳ありません。
カスタマイズ(外観)> ヘッダーナビ(グローバルナビ)> スクロールで最上部に固定する
にチェックを入れると起こるバグのようです。
iPhoneだけなのかしら?
Androidでは問題なく表示されるのでしょうか?
なべおさん。
うーん。
正直言えば、グローバルナビの固定は、スマホでは諸刃の剣ですね。
スクロール固定のスクリプトはページの最後に読み込まれるので、
ページが全て、ちゃんと読み込まれてるかどうかで挙動が変わったりします。
特に 2系の古い Android や iOS では鬼門かもしれないです。
当方の Android は 2.3 という超古い Android ですが
ページが全部読み込まれてれば、問題ないんですよね。
「小・中サイズのデバイスでは固定しない」機能を入れた方が良いですかねぇ?
るなさん。
「小・中サイズのデバイスでは固定しない」機能、悪くないと思います。
ですが、PC(mac,windwsの両方とも)の場合でも、ブラウザのウィンドウ幅をグローバルナビの表示が切り替わる「width: 991px」以下にすると、同様の不具合が出るようです。
ですから、デバイスで条件分岐するよりも、画面サイズで条件分岐された方が良いのではないでしょうか?
なべおさん。
WpTHK は完全レスポンシブなので、
もともと「デバイスでの分岐」という概念が無いですね。
Bootstrap と同様に
・991px以下 = 中デバイス
・540px以下 = 小デバイス
という振り分けです。
> 「width: 991px」以下にすると、同様の不具合が出るようです
どういった不具合でしょうか?
当方の環境では、不具合らしいものが見当たらないのですが。。。
るなさん。
「メニュー」をタップすると、アコーディオンは展開するが、うまくスクロールできません。
具体的には、
画面からはみ出したメニュー部分を頑張って表示しようと画面をなぞっていると、下に透けて見えるメインコンテンツの方がスクロールされてしまう。
上記の点が、一番の問題ですが、アコーディオンが展開するときにも、開き方がぎこちないだとか全体的に動作が不安定です。
なべおさん。
メニューを上部固定にした時、子メニュー部分が多いと下まで見えないかもしれないですね。
当方の Android だとメニュー部分はタッチでスクロールするんですけど、
IOS だとダメなんですかね?
Google Developers だとダメですねぇ。
今、ちょうどグローバルナビの機能強化をしてるところなので、
下まで見せる方法がないか検討します。
(メニューの高さ計算を入れるか、CSS の z-index でなんとかなるかなぁ・・・)
当ページも、WpTHK 2 リリースと合わせて子メニューが増えたので、
スマホのサイズによっては、コンテンツを一番下までスクロールしないと見えてない人がいるかもしれないですね。
> 開き方がぎこちない
当方のブラウザでは、PC・スマホ 共に快適にみえてるんですが、ぎこちないですか?
どっちにしても、動作の部分は Javascript の仕様なのでどうしようもないんですが。
なべおさん。
今、試しに z-index 入れてみたら。
Google Developers でも、メニュー部分がスクロールできました。
次のリリースで、反映させます。
(追記)
・・・と思ったけど、ダメだったw
高さ計算入れないとダメかな。
(さらに追記)
WordPress の返信可能数の限界超えたので、新しいコメントで返信します。