Luxeritas 3.6.9 リリース

2019年7月30日2019年8月2日

Luxeritas 3.6.9 をリリースしました。

ヘッダーをパララックスで表示できる機能やオープニングアニメを設定できる機能の追加など。

開発者ブログの記事にデモページへのリンク等も載せてあるので、改訂内容の詳細をご覧になりたい方はそちらを参照してみてください。

改訂履歴

機能追加

スクロール時にヘッダーをパララックスで表示させる機能追加
オープニングアニメーションを設定できる機能追加

その他

Google 先生のアクセシビリティ評価対象拡大への対応
半角のクォーテーションを HTML エンティティで書いてですら必ず全角に変換されるという WordPress 特有の謎変換への対処（WordPress の開発陣が間違えたとしか思えない・・・コピペしてもらうことを前提に記事を書いてる場合に、こーいう謎変換は困る）
” → "
‘ → '
.htaccess のサンプルに JSON の圧縮・キャッシュの設定項目追加

リリース情報

Posted by るな

Luxeritas 3.6.10 リリース

Luxeritas 3.6.8 リリース

コメント一覧

よしより:
2019年8月21日 13:52
お世話になります。
初めての投稿です。
ヘッダーナビ(グローバルナビ)の余白(padding-bottom)が
Windows10とMacのパソコンで表示が異なる現象が起きていて、
調べても原因が分らず、投稿させていただきました。
私はサイト制作担当者でレベルはhtml、cssは分りますが、WordPressは初心者でphpはよく分りません。
デザイン上の目的は、グローバルナビの帯とボタンの上下の隙間をなくしたいので0pxで設定しています。
Windows10で「google chrome」や「edge」の場合は問題なく隙間わ0で表示されますが、
Macパソコンの「google chrome」や「safari」で表示すると隙間でてきてしまいます。
表示テストでは、windows10のパソコンは3台、Maxは2台で試して見ましたが、
同じ結果でした。
iPad miniでも試したら隙間はできませんでした。
◇「カスタマイズ(外観)」の「ヘッダーナビ(グローバルナビ)」の設定
ナビ上の線の太さ 4px
ナビ下の線の太さ 1 px
ナビ上下パディング 16 px
ナビバー上下パディング 0 px
以上です。
ご教示いただければ幸いです。
よろしくお願いいたします。
返信
- るなより:
  2019年8月21日 16:25
  よしさん。
  子テーマの CSS で nav をいじってる箇所がありますが、これを外してもですか？
  特に height 指定してるので、モバイルナビでは見た目が酷いことになっちゃってますよ？
  あと、質問とは関係ない部分だけど、Javascript でエラーが出ちゃってる部分がありますね。
  これは、1カラムになってるのが原因なので、次のバージョンで直しておきます。
  返信
  - よしより:
    2019年8月22日 10:43
    るなさま
    早速ご回答いただきましてありがとうございます。
    「追加CSS」でheightやline-heightを設定したことはありますが、直後に消してから更新しました。
    「Windows10」の「chrome」で直ったのを確認できたので問題ないと思っていました。
    しかし、数日後にMacパソコンでは表示がズレていることが分かり、
    いろいろ調べて見ましたが、原因が分かりませんでした。
    最初の質問「iPad miniでも試したら隙間はできませんでした」と書きましたが、
    再度確認したらズレています。たいへん失礼しました。
    iPhone8でも確認したらズレていました。
    再度「Windows」上の「chrome」のデベロッパーツールで確認しましたが、
    私には問題を発見できませんでした。
    Javascript のエラーについてはよろしくお願いいたします。
    返信
    - るなより:
      2019年8月22日 10:53
      よしさん。
      > 「追加CSS」でheightやline-heightを
      当方がこのコメントを書いてる現時点で、追加 CSS ではなく、子テーマの CSS に nav 関連の height 及びその他の指定があります。
      なので、特にモバイルナビでは見た目が酷いことになってます。
      > Javascript のエラーについては
      昨日リリースしたバージョンで、もう直ってますよ。
      返信
      - よしより:
        2019年8月22日 23:11
        るなさま
        ご回答ありがとうごさいます。
        ご指摘の箇所を外すことができました。
        問題は解決しました。
        ありがとうごさいました。
        返信
かずえより:
2019年8月4日 18:26
お世話になっております。
私はWordPress初心者ながらLuxeritasテーマは大変使いやすく利用させて頂いてます。
今現在まだサイト全体のレイアウトを作成しているところなのですが、ネットで調べても分からなかった(私の知識レベルでは)点があり、初心者でお見苦しい質問かもしれませんが、お一つ質問があります。
・グリッドレイアウトで選択できるトップページ、選択したカテゴリー一覧、選択したtag一覧(アーカイブ)でのタイル型(最大4列)と同じような表示の仕方で、サイト内検索の結果の画面をタイル型(最大4列)にする方法はありますでしょうか。
どうしてもサイト内検索結果がカード型のようになってしまい、もしかしたら私が気づいてない設定方法があるかもしれないと思いご質問させて頂きました。
子テーマにsearch.phpとloop.phpをコピーしてどこかを編集するのと、classとidがtile-4なのが関係あるんではないか？という点まで調べたのですがそれ以上のことは分かりませんでした…
急ぎではないのでお時間が空いているときにご解答していただけると助かります。よろしくお願いします。
返信
- るなより:
 2019年8月4日 19:18
 かずえさん。
 まず先に言っておくと「検索結果をタイル型やカード型で並べて表示することが閲覧者にとって利便性が高く優しい表示なのか？」ってことは考えた方がいいと思いますよ？
 「改造」に相当するので本来回答しかねますが、こーすれば一応できる程度のことを書いておくので、あとは自己責任でやってください。
 以下、全部 loop.php 内
 1.
```
<div id="list" itemscope itemtype="https://schema.org/SearchResultsPage">
```
 に class="tile-4" をつける。
 2.
 記事一覧上部ウィジェットの上にある if( $_is_search === true ) {} 内の一番下に以下を書く。
```
?>
<div id="tile-4">
<?php
```
 3.
 一番最後の </div><!–/#list–> の上に
```
<?php
if( $_is_search === true ) {
?>
</div>
<?php
}
?>
```
 を書く。
 返信
 - かずえより:
 2019年8月4日 21:00
 サイト内検索のタイル化のやり方を教えて頂き非常に助かります、ありがとうございます！
 ご指摘のとおり利便性の点についても再度考えたいと思います。
 本当にありがとうございました。
 返信
hanikoより:
2019年8月2日 18:03
るなさん、はじめまして！
Luxeritasを愛用させていただいているhanikoと申します。
いつも迅速かつ質の高いアップデート、ありがとうございます。
一点、サムネイル画像について質問させてください。
現在「320 x 180px」の横長サムネイルを使用しています。そのため、アイキャッチ画像に指定する画像はこのサイズの比率に合わせて編集しているのですが、以下のような「記事のアイキャッチ画像」「OGP」以外の箇所では、全て正方形のサムネイルが表示されています。
・新着記事ウィジェット
・関連記事ウィジェット
・ページ下部の「Prev・Next」
・ブログカード　など
こちら、それぞれ横長サムネイルへの表示に変更する方法はありますでしょうか？
できれば全て、弊ブログ個別記事ページのサイドバーに設置している「カテゴリー別人気記事ランキング」のように、横長サムネイルで表示したいのです。。
お手数をおかけしますが、何か方法がありましたらご教示いただけますでしょうか。
よろしくお願いいたします。
返信
- るなより:
  2019年8月2日 19:08
  haniko さん。
  見なきゃいけないとこが多いなｗ
  ちゃんと調べてから回答するから、回答は明日か明後日まで待ってｗ
  返信
  - hanikoより:
    2019年8月2日 23:03
    るなさん、調べてくださってありがとうございます！
    自力で変えられなかったところを列挙したので、多くなってしまって申し訳ないです。。
    現状「新着記事ウィジェット」と「関連記事ウィジェット」は使用していないので（横長サムネイルになれば使いたいと思っていますが）、残りの二つをよろしければ……！
    全く急ぎませんので、どうぞよろしくお願いいたします。
    返信
    - るなより:
      2019年8月4日 19:18
      haniko さん。
      新着記事： inc/widget.php
      関連記事： related.php
      ブログカード： inc/blogcard-func.php
      Prev/Next（投稿ページ）： single.php
      Prev/Next（固定ページ）： page.php
      それぞれ「thumb100」って書いてあるところを検索して探し出して「thumb320」にすれば OK。
      ただし、これらの thumb100 に固定してる部分はレスポンシブで画像の自動伸縮にはしてない。
      つまり、画面幅の小さいスマホ（画面幅 320px 等）で 320px の画像を使うということはどーいうことかをちゃんと理解した上で、自分でレスポンシブ用の CSS を書いて調整する必要があると思います（画面幅ごとに % 指定するなど）。
      返信
      - hanikoより:
        2019年8月5日 10:11
        るなさん、ひとまず「Prev/Next（投稿ページ）」を試したところ横長サムネイルを表示させることができました。望んでいた通りの表示ができて大変嬉しいです！
        スマホ表示で問題が起きないか確認しながら、他の箇所も変更・CSSで調整していきます。
        詳しく教えてくださって、本当にありがとうございました！
        返信
陸より:
2019年8月2日 07:32
るな様
　お世話になっております。
>> 1．記事一覧で
　なるほど、そういうことなんですね。
　了解しました。
>> 投稿画面等にあるコメント一覧
　本当は翻訳ファイルを変更したほうが個人的にはよかったんですが、翻訳ファイルを変更すると、親テーマのアップデート時に上書きされてしまいますよね。
　子テーマに複製してみましたが、うまく反映されないようですので。
　すみません、追加でもう1つ質問です。
　関連記事の抜粋文字数はどこかで変更できますでしょうか。
　トップページの記事一覧に比べると、抜粋文字数が短いようなので、できれば変更したいと考えているのですが。
　以上、よろしくお願いいたします。
返信
- るなより:
  2019年8月2日 08:04
  陸さん。
  > 翻訳ファイルを変更したほうが
  WordPress で子テーマ内のファイルが優先して読み込まれるのは、子テーマディレクトリ直下の PHP ファイルのみです。
  子テーマ内の翻訳ファイルを読み込む場合は、load_child_theme_textdomain() という子テーマ専用の関数を使う必要があります。
  Luxeritas のテキストドメイン名は「luxeritas」なので、以下のように書けばいけます。
```
load_child_theme_textdomain( 'luxeritas', get_stylesheet_directory() . '/languages' );
```
  ja.po ファイルの中身は ↓ こう。
```
msgid ""
msgstr ""
"Language: ja\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Poedit-SourceCharset: UTF-8\n"

msgid "No comments yet.  Be the first one!"
msgstr "はにほー"
```
  > 関連記事の抜粋文字数
  related.php の 116行目の 40 の数字を変えればいいです。
  返信
  - 陸より:
    2019年8月2日 10:14
    　お世話になります。
    　子テーマで翻訳を利用する方法をお教えいただき、ありがとうございます。
    　教えていただいたコードを参考に、子テーマの「functions.php」に下記コードを記述してみました。
    function my_child_theme_setup() {
    load_child_theme_textdomain(‘luxeritas’, get_stylesheet_directory().’/languages’);
    }
    add_action(‘after_setup_theme’, ‘my_child_theme_setup’);
    　そのあと、子テーマのフォルダ内に「languages/site」フォルダを作成し、「ja.mo」と「ja.po」を保存しました。
    　そして、FTPで「functions.php」と「languages」フォルダをアップロードして、サイトを見てみたのですが、翻訳が反映されていないようです。
    　どこか手順が間違っていますでしょうか。
    　それから、関連記事の抜粋文字数に関しては、了解しました。
    　ありがとうございました。
    　以上、よろしくお願いいたします。
    返信
    - 陸より:
      2019年8月2日 10:35
      　お世話になります。
      　先ほどのコメントで翻訳ファイルを「languages/site」に保存したと書きましたが、「load_child_theme_textdomain」のリファレンスをもう1度ちゃんと読んでみたところ、第2引数のパスは、言語ファイルが存在するパスとのことでした。
      　そこで、試しに翻訳ファイルを「languages」の直下に保存してみましたが、やはり翻訳が反映されないようです。
      　以上、よろしくお願いいたします。
      返信
      - るなより:
        2019年8月2日 14:36
        陸さん。
        当方が書いたとおりに書いてくれれば反映されたんですけどね。。。
        after_setup_theme でフックしてるのが原因です。
        Luxeritas ではフック呼び出しの無駄をなくすために、after_setup_theme の代わりに call_user_func で呼び出してます。
        なので、さきに書いたとおり、
        load_child_theme_textdomain( 'luxeritas', get_stylesheet_directory() . '/languages' );
        ↑ こうか、または ↓ こうです。
        call_user_func( function() { load_child_theme_textdomain( 'luxeritas', get_stylesheet_directory() . '/languages' ); });
        ja.po ファイルも親からコピーするよりも、当方が書いたものをそのまま書いて、Poedit で ja.mo ファイルを生成した方が無駄がないです。
        返信
        陸より:
        2019年8月2日 20:44
        　お世話になっております。
        　なるほど、そういうことだったんですね。
        ようやくうまく変更することができました。
        　ありがとうございました。
        　以上、今後ともよろしくお願いいたします。
        　追伸：どうでもいいですが、この記事の本文の冒頭の部分、バージョン番号が3.6.8になってますね。
        https://thk.kanzae.net/wp/
        の「リリース情報」の欄を見ていて、一瞬ん？と思ったので気づきました。
        　本当はここもリンクに記事タイトルが入ってるとわかりやすいんじゃないかな？と少し思いました。
        　ということで、一応ご報告でした。
        返信
        るなより:
        2019年8月2日 20:53
        陸さん。
        > 追伸
        あら、ほんまですね。直しますたｗ
        返信
陸より:
2019年8月1日 20:51
　お世話になっております。
　1点要望と2点ほど質問があり、投稿させていただきました。
　まず、要望です。
　投稿ページに関連記事を表示しているのですが、関連記事のリンク文字列がどれも「関連記事」となっています。
　これを記事のタイトルで表示するようにしていただくことは可能でしょうか。
　音声読み上げで閲覧していると、どの記事かわからないことがあるため、可能でしたら、検討いただけると幸いです。
　続いて、質問です。
　1．記事一覧で「記事を読む」に「aria-hidden」が指定されているのには、何か理由がありますか？
　個人的には「記事を読む」リンクも読み上げさせたいのですが、もし何か理由があるようでしたら、教えていただけると幸いです。
　2．投稿画面等にあるコメント一覧で、コメントがないときのメッセージ「まだ、コメントがありません」を変更することは可能ですか？
　以上、よろしければ教えていただけると幸いです。
　よろしくお願いいたします。
返信
- るなより:
  2019年8月2日 02:21
  陸さん。
  > 要望です。
  確かにこれは優しくないですね。次のバージョンで直しときます。
  > 1．記事一覧で
  「記事を読む」というリンク名が同じなのにリンク先が異なるリンクが存在する状態（あまり良い状態ではないと言われる）をなるべく避けるために「記事を読む」の前に短いタイトルを付ける状態を標準にしてるため aria-hidden か aria-label が必要になります。
  タイトルが同じリンクになっているため、すぐ近くに同じリンクがある場合は aria-hidden という慣例に従ってます。aria-label でも構いません。
  > 投稿画面等にあるコメント一覧
  2つの方法があります。
  comments.php 内にある「No comments yet. Be the first one!」を直接書き換えるか、langage/site/ 内の翻訳ファイルを Poedit 等を使って書き換えるかです。
  返信
綾糸より:
2019年8月1日 18:59
すみません～　投稿したらタグ消えたの気づいたんですが、また別になってしまうから追記やめました；
入ってしまう～　のくだりはPタグです。すべての行に入るので＆ｎｂｓｐ；もＰタグで囲まれる感じです。
で、改行はビジュアルエディタ側で改行したものが、下書き保存などすると消えてしまい
テキストエディタでｂｒを入れてもそれも消えてしまうといった現象です。
で、3.6.8に戻したら戻りました。
それ以外には、、、うーん、3.6.8にしたのは数日前で、3.6.9にしたのは今日なんですが
その間には何もしていないので、私の方でも原因わからない状態です。
返信
- るなより:
 2019年8月1日 19:50
 綾糸さん。
 ていうか、綾糸さんの言ってる現象は、WordPress 標準の動きですよ？
 WordPress は、wpautop っていうフィルターが掛かってて タグや タグを自動挿入する仕組みになってる。
 テキストエディタで タグを書いても「見た目上」は存在してるけど無視されるし、ビジュアルエディタで改行した状態でテキストエディタに移動した場合 タグは「不要なものが書かれている」と判断されて タグは勝手に消されます（保存するまでは実際には消えないけど、見た目上は消えてる）。
 タグも同様で、ビジュアルエディタからテキストエディタに移動すれば、意図的に class を付与したりしない限り、見た目上は勝手に消されます。
   が で囲まれるのもビジュアルエディタ本来の動作です。wpautop フィルターは連続 や連続 を許容しないので、ビジュアルエディタで連続改行すると勝手に   が挿入されます。
 これは、WordPress 本体の仕様なので、Luxeritas だろうが、デフォルトテーマである Twenty シリーズだろうが同じです。
 ver3.6.8 にしてビジュアルエディタとテキストエディタを移動して タグや タグが消えないってことは逆にありえないです。
 返信
 - 綾糸より:
 2019年8月1日 22:54
 お手数かけてすみません。
 そうなんですね。標準の。
 Luxeritasでは3.6.8まで、見た目上は見えていなかったもので、急にタグだらけになってとても使いにくいなーと思ってしまいました。
 たまにPタグが自動で入って、目にも見えるテーマもありますが、メインサイトは全部Luxeritasだったので「見えない状態」に慣れてしまってました。
 とりあえず3.6.8で行くか、慣れる為にもう一度アップデートするか考えてみます。
 丁寧に解説して下さってありがとうございました。
 返信
 - るなより:
 2019年8月2日 02:21
 綾糸さん。
 見える、見えないとか、タグだらけになったってのは、どういうことでしょう？
 テーマによって見えるテーマ見えないテーマなどというものはありませんよ。
 当然 Luxeritas も同じです。v3.6.8 も v3.6.9 も全く同じですし、他のテーマも同じ。挙動に違いはありません。
 違いが出るとすれば、wpautop にフィルターを掛けるプラグインを導入したり、もしくは wpautop に何か特殊なフィルターを掛けるようなテーマを使った場合です（Luxeritas は wpautop に対して何もしてないです）。
 WordPress はビジュアルエディタを使うと勝手に整形をしてしまうので、ビジュアルとテキストを行き来すれば、 や は見えなくなるってのが WordPress 標準の挙動です。
 これを回避する方法は「ビジュアルエディタを使わない」ってことです。
 テキストエディタのみを使っている場合は、ブログ画面での表示以外の整形が行われないので、 や も含めて、自分で書いたタグも空行も常に維持されます。
 当方は WordPress のこの「勝手に整形する」という挙動が嫌いなので、開発以外で通常の記事を書く際はテキストエディタしか使わないようにしてます。
 返信
 - 綾糸より:
 2019年8月2日 13:22
 なるほど、、うーん。
 説明が下手なのか、うまく伝わっていないのか、それとも私がボケているのか。
 どうにも、るなさんに伝わらないということは、たぶん私が何かをやらかしてる可能性が高いという事で、お騒がせして申し訳ありません。
 ひとつ気づいたのは、タグが見える記事については　新たにビジュアルエディタでテキスト入力してテキストエディタに切り替えるとやはりすべてにPタグが見えて、
 まったく新しい記事を同じようにビジュアル・テキスト切り替えながら編集しても　そちらはこれまで通りタグは見えず。
 タグだらけになった記事は、完全に手コーディングしたかのような全体がHTML記述になっているという状態。
 いつもビジュアルとテキストを行き来するやり方たっだので、今後はテキストのみでやってみるのも検討します。
 P.S　ところで、返信のコメント送信後、相変わらずエラーで戻されるのですが、その際にもう一度、返信ボタンを押してから送信すると、２回目は「返信」に出来たようです。これはどうかな。
 返信
 るなより:
 2019年8月2日 14:36
 綾糸さん。
 綾糸さんの言ってるような現象を意図的に発生させるためには（ビジュアルで編集した内容をテキストで見た際に タグを見えるようにするには）TinyMCE の wpautop を無効化する以外には方法がありません。
 何かしらのプラグインが wpautop を無効化してるんじゃないでしょうか？
 functions.php で有効・無効を制御することも可能です。
 add_filter( 'tiny_mce_before_init', function( $init ) { $init['wpautop'] = false; return $init; });
 ↑ こうするとビジュアルの自動整形を無効化できるので、ビジュアルで編集しても タグ等を見えるようにできます。
 false を true にすると WordPress 本来の動作になります。
 P.S の件に関しては、Google reCAPTCHA がどうやってロボットか人間かを判断してるのか知らんので、当方に聞かれても何とも分からんです。
 返信
綾糸より:
2019年8月1日 17:14
お世話になっております。
たくさんの機能追加ありがとうございます☆
ブロックエディタでの機能追加、とても魅力的ですが、実はまだクラシックエディタ利用者です；
Ver3.6.9にアップデートしましたら、クラシックエディタで記事を書くと、すべてにタグが入ってしまうのと、改行が消えてしまったり、無理矢理タグを書いてみたけど、それも消えてしまう感じで、テキストエディタ編集がとても使いにくくなってしまったのですが・・。
クラシックエディタでの利用時、以前のように戻すには3.6.8以前のバージョンにするしかないでしょうか。
お忙しいところ恐縮ですがご教示くださいませ。
※今、このコメントを投稿しようとしたらまた「認証が無効です」となり戻されたので、お返事はまた別スレになってしまう可能性が高い事をお許し下さい～この謎がある為、お邪魔しにくいのも悲しい現実。
返信
- るなより:
 2019年8月1日 18:09
 綾糸さん。
 いまいち、何のこっちゃか分からんので、もうちょい詳しく。
 ver3.6.9 で旧エディタ関連の変更なんてないですよ？
 当方もクラシックエディタとブロックエディタ両刀使いですが何の問題もないでござる。
 質問内容がよく分かんないので、とりあえず逆質問。
 ・「タグが入る」って何のタグが？
 ・「無理矢理タグを書いたけど消える」って何のタグが？
 ・改行が消えるって、どーいう意味での改行？ HTML の タグ？それともテキストそのものの改行(¥n)？
 ・ver3.6.8 にすると、綾糸さんの言ってる現象は発生しなくなるの？
 できれば具体例を書いてもらえれば、何かしらヒントになるかもしれない。
 返信