Luxeritas 3.5.3.1 リリース
Luxeritas 3.5.3.1 をリリースしました。
ver3.5.3 で以下の部分が気になったので、ちょこっと直しただけです。
気になる方だけアップデートしてください。
- デバッグモード有効時に headers already sent by ~ の Warning が出ちゃう箇所があったので修正
- デバッグモード有効時に Only variables should be passed by reference ~ の Notice が出ちゃう箇所があったので修正
- Javascript で一箇所グローバルスコープに出ちゃってるところがあったので閉じ込めた
ディスカッション
コメント一覧
るなさん
お世話になります。
現在3.5.3.1を利用させていただいております。
1.Font Awesome 5だとスマホのときのグローバルメニューのSidebarの上の左右矢印アイコンが表示されなくなります(Font Awesome 4にすると表示されるので今は4の設定にしています)。
2.スマホで見たときのフォントサイズバランスがおかしくなった気がします。
私のサイトだと、
◇サイトタイトルのフォントが大きくなった
◇サイトキャッチフレーズのフォントは小さくなった
◇カテゴリリンクやフッターリンクも小さくなった
◇タイルレイアウト時の記事の抜粋?も小さくなった?
うまく伝えられないのですが、私のサイトをスマホで見ていただければと思います。
お手すきのときにでも調査いただければ幸いです。
セブンさん。
1 に関しては Luxeritas には全く問題ないです。
セブンさんのサイトで表示されない理由はフッターに書かれている ↓ こいつのせいです。
<script> var fontawesome = "https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"; var googlefont = "https://fonts.googleapis.com/css?family=Montserrat:300,400,700"; function cb(href) { var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; document.head.appendChild(link); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if (raf) { raf(function (){ cb(fontawesome);cb(googlefont); }); } else { window.addEventListener('load', function(){ cb(fontawesome);cb(googlefont); }); } </script>
このスクリプトが FontAwesome 4 の CSS を読み込んで Luxeritas の CSS を上書きしてます(基本的に FontAwesome 4 と 5 は共存できません)。
しかも Luxeritas の場合、v4.7.0 なのに、このスクリプトは v4.5.0 なので劣化してます。
あと、上記とは関係ないですけど、セブンさんのサイトでは数箇所 jQuery を使用してる Javascript がありますが、jQuery の存在チェックをしてないスクリプトが多く見られるので「jQuery を非同期にする」に設定すると、これらのスクリプトは正常動作しない可能性があります。
2 に関しては当方の CSS ミスです。修正しました。ありがとうございます。
るなさん
朝早くにご丁寧なご回答くださいまして誠にありがとうございます。
fontの件はまさしくそうでした!
お手間をかけてしまい、誠に申し訳ございません。
お恥ずかしい限りです。
今度はもっと自分で調べるように心がけます。
jQueryも見直してみます。
CSSの修正もありがとうございます。
これからもよろしくお願いいたします。
非常に詳しく丁寧に説明していただきありがとうございます。非常に参考になります。
正直あまり上手くやれる自信はないのですがCSSで頑張ってみます!
貴重なお時間を割いていただきありがとうございましたm(_ _)m
るな様
お忙しい中お返事をくださりありがとうございます!感謝しますm(_ _)m
私もその方法は試そうとしたのですが
デザインの都合上、サイドバー全体の背景は画像、ウィジェットエリアは白でいきたいと思っています。
可能であればCSSのposition:sticky or Luxeritas内のSticky-kitを使用して追従させたいのですが、テンプレートの仕様的に厳しいでしょうか…?
WP初心者@扇さん。
position:sticky でも、sticky-kit でも、どっちでもできますよ。
sticky-kit を使う場合もライブラリは読み込み済みなので、Javascript が書けるならできます。
ただ、背景画像も一緒に追従させるなら、ウィジェットエリアを追加する必要がありますね。
1. 子テーマの functions.php でウィジェットエリアを登録。
2. 親テーマの /luxeritas/sidebar-left.php を子テーマにコピー。
3. コピーした sidebar-left.php にウィジェットエリア追加。
— 以下二択 —
4. 子テーマの Javascript(luxech.js)で sticky-kit を使って要素固定。
4. 子テーマの style.css で position:sticky で要素固定。
といった感じですね。
るな様、はじめまして。
無料ブログサービスからWordPressに移行するためにテンプレートを探していたところ、るな様のLuxeritasに辿り着きました。
色々なテンプレートを試しましたが、このテンプレートが一番高機能&カスタマイズ性に優れていて気に入っております(先日プラグインも購入させていただきました)。
一つ質問なのですが、3カラムで片方のサイドバーのみ【スクロール追従サイドバー(Sticky-kit v1.1.3?)】が使えないのですが、何かいい方法はありませんでしょうか…?
自分でも色々試行錯誤しているのですが
・position:sticky(css)→☓
・Standard Widget Extensions(プラグイン)→☓
・Q2W3 Fixed Widget(プラグイン)→追従◯ しかし背景が置き去りにされる(http://or2.mobi/data/img/217140.png)
…と、どれもちゃんと機能しなくて(;_;)
WP初心者@扇さん。
その Q2W3 Fixed Widget っていうのを使って、ウィジェットの背景色をサイドバーの背景色と同じにすればいいんじゃないですかね?
例: ↓