WordPress修理屋の修理メモ

現象

このサイトはWordPressのデフォルトテーマだった「Twenty Twelve」の子テーマを作りカスタマイズしています。

「Twenty Twelve」をベースにして、基本部分で「Twenty Twelve」のレイアウトを引き継ぎながら、子テーマのstyle.cssで新たなデザインと機能を付け加えています。
子テーマにする事で「Twenty Twelve」のバージョンアップで修正部分を書き換えられる事も無いので、この形で使い続けているわけですが、「Twenty Twelve」の癖と言うか設定で、Global_navに表示する英文字が強制的に大文字に変換されるのが、どうも気になってしまい、今更ながらに修正したくなったわけです。

「Twenty Fourteen」もGlobal_navで項目が大文字に変換されます。

英文字が強制的に大文字に変換されるのは「Twenty Twelve」と「Twenty Fourteen」だけの仕様で、

• 「Twenty ten」
• 「Twenty Eleven」
• 「Twenty Thirteen」
• 「Twenty Fifteen」
• 「Twenty Sixteen」

では変換は行われず、大文字は大文字で、小文字は小文字で表示されます。

 

原理と修正

全て大文字になるのは、CSSでGlobal_navの各項目の「a」要素の「text-transform」プロパティーを「uppercase」に設定して大文字にしているからです。
ここを編集するだけなので、らくちんです。

Twenty Twelve　（1533行目）

 

Twenty Fourteen　（957行目）

text-transform: uppercase;
を
text-transform: none;
にすれば、大文字は大文字に．小文字は小文字として表示されます。

しかし、直接「Twenty Twelve」（又は「Twenty Fourteen」）のstyle.cssを修正すると、テーマをバージョンアップした時にまた前の状態に戻るので、そうならない様に「Twenty Twelve」（又は「Twenty Fourteen」）の子テーマを作り、その子テーマのstyle.cssに、

Twenty Twelve

 

Twenty Fourteen

を加えてやります。

子テーマを作るには、まずFTPクライアント（FileZillaやFFFTP、Cyberduckなど）でサイトを置いているサーバに接続します。

そしてサイトのWordPressのディレクトリ内の、「wp-content」内の「themes」に、子テーマのディレクトリを作り、子テーマ名を付けます（好きな名前でOK）。

その子テーマ内に「style.css」を作成し、

の様に子テーマ名・親テーマ名をコメントで宣言し、親テーマのstyle.cssをインポートしてやります。
（親テーマのstyle.cssへのパスは、親テーマ・子テーマとも同じ「Themes」ディレクトリに有るなら「../twentytwelve/style.css」となります。
これは”子テーマのstyle.cssのあるディレクトリ[ 子テーマのディレクトリ ]の一つ上のディレクトリ[ 「Themes」ディレクトリ ]にある「twentytwelve」ディレクトリ内のstyle.css”と指示しています。）

子テーマを作る時、最低限必要ものはstyle.cssです。これに上記の形で子テーマ名と親テーマ名が宣言されていれば、他のファイルが無くてもWordPressはその子テーマを認識し、ダッシュボード > 外観 > テーマ で、この子テーマを選択出来る様になります。

そして、先程の修正部分の

Twenty Twelveの子テーマの場合

 

Twenty Fourteenの子テーマの場合

を @import url(“../○●/style.css”); の次の行以後に付け加えてやります。
そして文字コードを「UTF-8のBOM無し」として保存します。（WebではBOMはトラブルの元）

すると、

と大文字は大文字で、小文字は小文字で表示されます。