【WordPress】動かない／原因が分からない時の対処法と困った時の小技集【XeoryBase】

当ブログは２０１９年３月に『cocoon』に移行した。よって、以下の内容はあくまでも参考程度に見て欲しい。

当サイトはWordPressのXeoryBaseテーマを使用している。その中で、うまくいかなかったことや対処法、ちょっと使える小技についてを備忘録として記載しておく。

前準備
まとめ

前準備

子テーマを作成していない場合は作成しておくことをお勧めする。子テーマを作成する方法や意味は以下のサイトが参考になった。

XeoryBaseの子テーマ作成の場合、style.cssに記載するTheme Nameを「xeory_base_child」、Templateを「xeory_base」とし、作成したstyle.cssとfunctions.phpを「xeory_base_child」フォルダに入れ、WinSCPなどのFTPクライアントで「/wp-content/themes」フォルダにアップロードすれば認識される。

子テーマを作成し、カスタマイズする前に「外観」－「テーマ編集」の編集するテーマの選択で「xeory_base_child」を選択するのを忘れずに！

CSSの設定が反映されない・一部しか反映されない

初期設定のカラー設定がデフォルト以外の場合

デフォルト・緑・赤・オレンジ・ピンクは設定が別なことがある。この設定は変わったのに、この設定は変わらない！　という時はこれを疑うこと。

WordPressでヘッダーとメニューに背景色をつける方法（テーマ：Xeory）

「3-1.変更箇所の検索」で触れられいる。#headerに限らない（私は♯gnavではまった）変更が反映されないなぁ、と思ったらこれを疑ってみること。body.color0*の方に同じ項目があってそちらで上書きされている可能性大。

初期設定のカラー設定がデフォルトの場合

キャッシュの問題ではないようなら、他のCSSスタイルが優先されている可能性が高い。デベロッパーツール（Google ChromeならF12）を使って原因を探ってみよう。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

編集した項目に「Unknown property」と警告表示される

下記の現象のことだ。

スペルミス？　いやいや、間違ってない。つか、さっきまで何も警告表示されていなかったのに「なんで？」となるのだがなんなのだろう。いみわからん。このままにしておくと設定反映されない。よく見るとbackgroundの前にオレンジの波線がついている。エラー箇所と言う意味だ。疑問に持ちつつもbackground前の空白を消してみる。

警告が消えた。なんで？この後にbackground前に半角空白入れなおせばＯＫ。先のように警告表示されなくなる。なんで？　……理由は不明だが、これで設定反映すれば大丈夫だ。

この現象、何かと出てくるので地味に辛い。プログラムミス状態から変更して、正常なスペルにした瞬間に出るので変なバグでも残ってるのだろるか。それとも全角空白もしくは全角文字が邪魔しているのか。保守のこと考えるとコメントは残したい。英語コメントは難しいから無理。プログラム言語でも似たようなこと、よくあると言えばあるが。地味に嵌る部分だ。こんなところでハマりたくない。

（XeoryBaseテーマ限定？）タイトルとメニューをセンタリング(中央寄せ)する

以下の記事を参考に。

【XeoryBase】タイトルとメニューをセンタリング(中央寄せ)する方法【Wordpress】

Wordpressでつまづく人の大半は、思い通りにテーマをカスタマイズ出来ない点ではないだろうか。私自身エンジニアだが（Webデザイナーではない）現在進行形でめちゃくちゃ苦労している。そのひとつがタイトルとメニューのセンタリング（中央寄せ）...

「テーマの編集」画面、画面を閉じなければCTRL＋Zで一つ前の編集状態に戻る

WordとかExcelの元に戻すと同じノリで使える。どうにもならなくなって、バックアップも取っていなかった時、ダメ元で試してみよう。私は一度、助かった。

Font Awesome 5 Freeでアイコンが表示されない

これが一番、よくハマる。原因は複数ある。

Font Awesomeのバージョンが競合している

XeoryBaseでは古いバージョンのFont Awesomeが使われているため、競合している可能性がある。一部表示されているけど、一部表示されていない場合などこれが疑われる。

テーマヘッダー(header.php)の<head>タグ内に以下を記載する。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

Font Awesomeのバージョンが古い

上記テーマヘッダー(header.php)内に記載されている「v5.3.1」が現在採用されているバージョンとなる。そのため、最新版がリリースされたら変更しなおさないと、新しいバージョンのアイコンは使えない。

Font Awesomeの同じバージョンでリリースされたアイコンなのに、表示されるものとされないものがある

理由は不明だが、当該スタイル（style.css）に「font-weight: 900;」とおまじないを入れると表示されることがある。

.post-content .simple-ul li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";
  position: absolute;
  left : 0em;
  color: skyblue;
}