[WordPress] TwentySixteenの導入:子テーマをカスタマイズ


前回子テーマの作成に成功したので、今度は子テーマをカスタマイズしていこうかと。

と言いつつ、子テーマのカスタマイズって実際にはどのように手をつけたらいいのか・・・さっぱりわからない・・・。
「子テーマのstyle.cssを優先して、足りない部分を親テーマのstyle.cssで補完する」というようなイメージでぼんやりとらえていたけど、本当にそれで合っているのか??

「子テーマ」「カスタマイズ」等で検索しても、子テーマ作成の方法だけの記事がぶわーーーっと出てきて、「作成した後どうするか」を解説してある記事がなかなか見つからず、やっとこさ発見しました。

バイラルクラブ – wordpress子テーマの作り方!style.css・各テンプレートファイル・function.php の設定手順

一般的には、親テーマの内容を全コピーして、カスタマイズしたい部分だけ、変更・追記していく形が良いでしょう。

アフィリエイトで稼ぐ方法を全部話そうと思う – WordPressでフォントや文字大きさ、行間をカスタマイズ
style.cssに関しては、「全コピーして必要な箇所だけを変更・追加」ではなく、「最初に作った状態に追記」という形でいいようです。

とりあえず試しに、上記サイトで例として書かれているフォントの変更にチャレンジ。
・・・してみたものの、記事本文が明朝体のまんま!!

原因究明のため、続く・・・

[WordPress] TwentySixteenの導入:子テーマ編


WordPressもバージョン4になり、新しい公式テーマも追加されたので、思い切ってTwentySixteenのカスタマイズに着手することにしました。
今まではものぐさなことに親テーマをそのまま書き換えてテーマをカスタマイズしていましたが、「子テーマを作ってカスタマイズするのが推奨されている」と聞き、慌ててまずは子テーマ作りに着手。

そもそも子テーマとは何なのか・・・
カスタマイズしたいテーマ(今回はTwentySixteen)を親として作成し、親テーマを直接カスタマイズするのではなく、子テーマ側をカスタマイズすることによって、TwentySixteenがアップデートされた時でもカスタマイズした箇所が変更されてしまわないようにするもの。らしいです。

「子テーマ作成」で検索すると山ほど解説してくださっている記事が見つかると思いますが、個人的には一つの記事だけではなくいくつかの記事をマルチに参考にすることをお勧めしたいです。なぜかと言うと、ハマったから。
必要なコードが抜けていたり、コードが全角で表示されてしまっていて丸ごとコピペしたら失敗した、という記事もあったのでね!

子テーマの作り方

コマンドラインの使えないレンタルサーバなので、FTPでやりました。

(1):まずはFTPソフトでWordpressがインストールされているディレクトリに移動、wp-contentディレクトリ内のthemesディレクトリの中に子テーマのディレクトリを作成する。
子テーマの名前を決めてそのテーマ名のディレクトリを作成します。「twentysixteen」の子テーマだから「twentysixteen-child」にするとわかりやすいよ!という記事が多いですが、別に好きな名前をつけてOK。今回は「twentysixteen-child」にしてみた。

(2):「style.css」という空のテキストファイルを作成。中に書く内容はこちらを参考にしました(xserver用の解説だけどコードの部分はこれを使わせて頂きました)。
  ここで文字コードと改行コードに注意せなあかんようです。文字コードはデータベースサーバをUTF-8にしたのですが、Wordpressの場合は「BOMなし」というのが標準らしく、Terapadの「文字/改行コード指定保存」で「UTF-8N」と「LF」を選択して保存しました。詳しくはこちら

(3):「functions.php」という空のテキストファイルを作成。中に書く内容はstyle.cssと同じくこちらを参考にしました。

(4):(1)で作成したディレクトリ(今回はtwentysixteen-child)に、(2)と(3)で作成したstyle.cssとfunctions.phpをアップロードする。
(5):Wordpressのダッシュボードにアクセスし、外観>テーマを選択。(2)で設定したテーマ名の項目ができているはずなので、「有効化」をクリックするとサイトに反映される。

以上で作成は完了!

自分の場合は先ほど書いた「コードを丸ごとコピペしたら全角が入っていておかしくなった」「改行コードと文字コードがおかしかった」の2点で最初は失敗しましたが、最終的には作成できました。

続く。

Photoshop Elementsのトラブル


Windows10にアップグレードされてしまったらPhotoshopの設定もまっさらになっていました。
地味に焦ったことをメモ。(Photoshop Elements 9)

イメージ>サイズ変更>画像解像度 でピクセル数の変更ができなくなっていた
 (画像のサイズが変更できなくなっていた)
 photoshop01
 画面下部の「画像の再サンプル」にチェックを入れれば、「ピクセル数」の欄の幅と高さを変更するフォームが出てくるので、OK。
 印刷用に使う画像の場合など再サンプルがダメなケースもあるかもしれないけど、私はWEBに掲載する画像しか扱わないので、OKということにする。
フォントサイズが一定以上のサイズに変更できなくなった
テキストレイヤーでテキストを入力した後にフォントサイズを大きくしようとしたら、14px以上をドロップダウンリストから選択しても編集中の画像上でフォントサイズが変わらなかった。
 直接数値を打ち込むと「0.00 pixel から 14.92pixel の値を入力してください。最も近い値を挿入します。」というダイアログが出てしまった。
これはWindows10とは全然関係なく、元画像を作成した側の設定によるものでした。
 イメージ>サイズ変更>画像解像度 を見てみると、画像の解像度が「1 pixel/inch」になっていました。これを(かなり面倒だけど)通常の72pixelに変更すればOK。
 photoshop02

いまだに解像度のことをぼんやりとしか把握せずに作業してます。これではいかん・・・勉強しなくては・・・

Windows10にアップグレードしたらESETが一瞬おかしくなった件


意図せず会社のPCがWindows10にアップグレードされてしまっていた。
当事者曰く「勝手にアップグレードが始まった」らしいけど、そんなことあるのだろうか・・・絶対何かしらクリックしたはずだと思うけど。まぁ仕方ない。

弱小会社なのでセキュリティソフトはESET SMART SECURITYを使っているんだけど、これがWindows10アップグレード後におかしくなってしまった。
Windows7の頃はPCを起動すると必ずESETの起動開始の画面が一瞬出てたんだけど、それが出なくなっていた。
確認してみるとタスクトレイにESET関連のアイコンがなく、常駐していない模様。
スタートメニューの「すべてのアプリ」にもESETは表示されていない。

ググってみた結果「もしかしたらアップグレードしないといけないのかも」と思い、ここからバージョンアッププログラムを入手してインストールすると、インストールは成功したものの「アクティベーションされていません」「パーソナルファイアウォールの初期化に失敗しました」というエラーが・・・
おまけにその瞬間からなぜかインターネットに接続できなくなってしまった・・・。

ネットワーク設定を見てみても何の接続も表示されず、トラブルシューティングを試しても「ドライバがおかしいのかもね」的なことが表示されただけ。
さっきまで繋がってたのにそんなんおかしいやろ!と思い、とりあえずインストール完了の画面に「Windowsを再起動して下さい」と書いてあったのを思い出して再起動したら、何故かアクティベーションも(ユーザー名もパスワードもわからないから何も入力してないのに)OKになり、パーソナルファイアウォールのエラーもなくなって、インターネットにも普通に接続できるようになっていました。「コンピューターの検査」も普通にできたし。

一体なんだったんだ・・・という、それだけの記録です(笑)