WordPressのいろいろ。使っていてつまづいたところ、工夫したところなどを覚書にしてみました。

このテーマを本家のサイトで使うことにしました。

目次

• まずは準備
• 子テーマでつまづいた
• cssだけじゃなかった、答えはheaderにあった

　今まで使っていたwordpressのテーマは無料版でした。それでも十分な機能があったと思います。
ただ使いこなしきれていなかっただけかもしれません。
私なりのこだわりがあり、それを満たそうといじり、何度画面を真っ白にしたことか･･･。
　こだわりその1･･･トップページは3カラムだが、中に入ると2カラムもできる。
　こだわりその2･･･きれいな軽いサイトにしたい。
　こだわりその3･･･更新した記事がサムネイル付きでトップページに表示できる。
こまごまと書いていけば10個くらいになりそうですが、この3大こだわりを満たすものを探していました。
たまたま訪問したサイトが、とってもきれいだったのでどのテンプレートを使っているのか見たら、TCDとあったので、早速検索してサイトに入りました。･･･まぁ、なんということでしょう･･･
とってもきれいなテンプレートが並んでいました。まず、見つけるきっかけとなったサイトさんが使っているテンプレートを探しましたが、すでに販売終了となっていました。(有料ですよ)ちょっと残念ですが、選んだのはAN (tcd014)でした。
こだわり1~3すべて満たしていたのです。
決定です。

まずは準備

　現在動かしているテンプレートは色々いじりすぎて、データベースも1回エラーを起こしたりしていました。なので、新規にデータベースと独自ドメイン用の指定フォルダを作りインストールしました。
今まで作った記事やページはデータベースに入っているのでSQLでエクスポートできました。しかし、新しく作ったデータベースにインポートできなかったのです。
不幸中の幸い、あまりにも古い記事は整理しようと思っていたので、原始的なコピペで移すことにしました。
それにしても数十はあります･･･。画像はフォルダごと一度ダウンロードして、中身を新しいwp-content内にアップ。

子テーマでつまづいた

まずはカスタマイズする前に子テーマを作ります。
　どうしてかというと、テーマも更新することがあります。更新したら、今まで手を加えたstyle.cssなどが初期状態に戻るので(上書きされますのよ）、更新後に見たサイトが、デモサイト状態に戻ってしまうのです。ただし影響されるのは親テーマだけです。だから子テーマを作ってそちらをカスタマイズした方が危ない思いをしなくてすみます。
子テーマは何度か作っているので、私の場合は親テーマをそっくりそのままコピーしてフォルダ名にchildとつけます。
一番簡単なのは、FFFTPでアップしたときに、最初にアップしたフォルダ名がabcであったら、abc-childに変えます。そのあと同じ階層にもう一度アップ。こちらは名前を変えません。
　子テーマ内のfunction.phpだけは真っ白にします。これはfunction.phpが上書きできない仕様だからです。構成していくためのphpが書かれているので、上書きされては困りますよね。それに、子テーマを作った場合基本的には子テーマを先に読み込み、親テーマを読み込んでいきます。だから追加する分だけ書いていけばいいのです。極端な話、子テーマ内のfunction.phpは外してもいいのです。
　さて、cssも最近は小分けされています。昔はcssと名がつくものはひとつしかなくわかりやすかったのですが、開けてみてあらびっくり。style.css、コメント用のcss、パソコン用、モバイル用、スマホ用といくつもあります。
でも大丈夫。style.cssだけに以下の記述をすれば、子テーマcss⇒親テーマcss⇒サイトに反映となるはずです。

@charset "utf-8";   /* 日本語をcss内で使うときに記述 */ 
Theme Name: AN TCD014 子テーマ  /* 子テーマの名前 */
Template: an_tcd014　/* 親テーマが入っているディレクトリ(フォルダ)の名前。大文字小文字も判別されます */
@import url(‘../an_tcd014/style.css’);  /* 親テーマにインポートしますよ */

さぁ、書きました。テーマのページを見ると、しっかりと反映されています。
デモサイトだとグレーなので、明るいオレンジ色に変えたいなーと思い、cssを見て回りました。パソコン用のcssで変えられます。ちまちまと変更し、上書き保存してサイトを見ます。でもグレーなんです。

cssだけじゃなかった、答えはheaderにあった

まずはじめに思ったのは、記述内容を間違えた？でした。確認しましたが合っています。記述はもしかして他のcssにも必要？一応書いてみましたが変わりません。おかしいと思い、サイトのソースをじっくり眺めてみます。
･･･よくわかんない。
気を取り直して、テンプレートには画像も使われていたのでグレー仕様の画像をオレンジ仕様に作り直します。photoshopでちまちま･･･1px単位のものもあるので本当にちまちまです。作ってはFFFTPで子テーマのuploadフォルダにアップし、同名で置き換えていきます。すべて置き換えてから、本当にアップされたかひとつひとつ確認しました。OK！
でもサイトはグレー仕様のままでした。
もう一度ソースをのぞいてみます。

<link rel="stylesheet" href="私のサイト/themes/an_tcd014/style.css?ver=" type="text/css" />

え･･･っ？childがついてない。
こちらのサイトでやり方を見たので、header.phpを見ているうちにわかってきました。

template_urlは、現在アクティブなテーマフォルダのURLを取得する→親テーマフォルダ
stylesheet_directoryは、現在アクティブなスタイルシートのあるテーマフォルダのURLを取得する→子テーマフォルダ

つまり、現在cssとuploadは子テーマを参照にするようにしたかったので、

<link rel="stylesheet" href="<?php bloginfo( 'template_url' ); ?>"type="text/css" media="screen" />

を、

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory’); ?>" type="text/css" media="screen" /

で、子テーマのcssが反映されました。

index.phpにもあったので、修正しました。
完成！