久々にWordPressのテーマ変更

いままで愛用していた Graphene というテーマは更新すると表示が崩れることが判っており、直し方は面倒なので更新はあえて止めていたのですが、さすがにそろそろ問題かなと思われたので変更しても表示が崩れないテーマに変更しました。

日本の方が作られた First というテーマです。

グローバルに使われることが想定されているようで、引用の部分(blockquote)は日本語向けでは無いと感じます。

引用部分の先頭にダブルクオート(をひっくり返した記号?)を表示して、引用部分の本文は斜体(イタリック)で表す物ですが、この作法は英語圏向けの作法で日本語表記のブログ向けでは無いと、個人的には思ってます。

※そもそも斜体自体が日本語の様式にそぐわないと思われます

で、このあたりは Style.css に定義が載っているのでそれを修正すればOKなのですが、テーマが更新される度に手修正が必要になるので、子テーマを作って上書きするのが後からの手間を省けるやりかたです。

子テーマの作り方は以下のサイトが一番判り易かったです:
「10分で終わらせてくるっ!」WordPress子テーマの作り方を2ステップで簡単解説!

First の blockquote の記述は

blockquote {
    color: #888;
    font-style: italic;
    margin: 0 0 2.4em;
    padding: 12px 0 0 44px;
    position: relative;
}
blockquote:before {
    color: #ddd;
    content: "\201C";
    font-family: Georgia, serif;
    font-size: 84px;
    left: -5px;
    line-height: 1;
    position: absolute;
    top: -5px;
}
これを子テーマで以下のようにオーバーライドします。
blockquote p { margin: 0px; }    /*←blockquote 自体のp要素の上下空白を無くす*/
blockquote {
    color: #000000;
    border: 1px solid #a9a9a9;
    background-color: #efefef;
    font-style: normal;
    font-size: 90%;
    margin: 0px 0px 0px 0px;
    padding: 10px 10px 10px 10px;
    position: relative;
}
blockquote:before {
    color: #000;
    content: "";       /*←ダブルクオートの表示はしないように無設定にする*/
    font-family: Georgia, serif;
    font-size: 12px;
    left: 0px;
    line-height: 0;
    position: absolute;
    top: 0px;
}
完全にオーバーライドするためには、要素を全部子テーマ側に記述して修正しないと駄目みたいです。
例えば、blockquote:before(←引用文本体の前にダブルクォート付ける記述)ですが、子テーマ側で全てコメント化して無効にしようとしても駄目です。

あくまで親側の記述は生きているので、子の方で無かったことにしようと全てコメント化しても、この行為は子の方で親側の記述に対して何も変更しないという指示になるので意味がありません。

なので打ち消したい要素を全て子側に記載して、それらを直し、オーバーライドする必要があります。上記の場合は、ダブルクオートの表示をしないように文字設定を無い状態にして、blockquote:before自体は生きつつも実質なにも表示されない仕掛けに変えてます。


しかし問題がありまして、実験用のローカル環境では問題無く子テーマのオーバーライドが効いているのですが、本番環境は無視されまくりなんですよね・・・他にも上記のCSSのコードを表示しているところはSyntaxを色別に表示する仕組みの Prismatic というプラグインを入れているのですが、これも同様にローカル環境では反映されるのに、本番環境では同じ表示ならない(編集中のプレビュー表示だけ反映されている)・・・

なんかWordpressってそのへん素直に行かないこと多いなぁ。原因究明するのほんと面倒です
(・A・|||)



追記:blockquote の表示問題は解決
参照:WordPressで子テーマを作る際に知っておくべき仕組みと注意点 に記載の「子テーマのCSSがうまく反映されない場合(プルダウン)」の内容を参照して解決した模様です
親テーマの後に明示的に子テーマを読み込むように指示する書き方を導入

と同時にこの参考サイトには 『なおTCDテーマであれば、テーマオプション内の「カスタムCSS」に追記してもOK。テーマをアップデートしてもそのまんま残ります。子テーマ同様の安心。優しさ。初心者への愛』 といふ記載がありました。

2019-0505-ThemeEditorInfoTCDというのはブランド名らしく、いわゆるテーマ屋のようです。それはさておき「カスタムCSS」は First テーマにも存在してまして、子テーマを作り、その子テーマの Style.css の内容を WordPress のテーマエディタで修正しようとしたら警告みたいのが出たんです。 『直接テーマエディタでCSS直さんでもカスタムCSSに書いた方がお薦め』 のような表示が!

しかしこれは了解しつつ 「わしは子テーマを勉強中なんや!」と無視して続行しちゃってるわけですw

で、参考サイトのこの表記を帰納法的に考えると 『カスタムCSSをサポートしているテーマなら、子テーマ無しでCSSをカスタマイズできるんや』 ということになるかなと。

これに関してはローカル環境で別のテーマ導入してみてそのうち実験ですに...



さらに追記:Syntaxを色別に表示する仕組みの Prismatic というプラグインの表示問題
⇒ うーむ・・・これは翌日になったら正しく表示されるようになっていました。いちおう表示系が正しくならない場合はブラウザのキャッシュを削除する形で最新化されるはずなのですが(謎

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください