WordPressのテーマをTwenty thirteenにしてみた

※HTMLもcssもわからないど素人が書いています。間違っていることがありましたらコメント欄にご指摘いただければ幸いです。

今までこのブログはWordPressのTwenty twelveを使っていたけど、急に検索窓を右上にしたくなった。自分でやろうとしたけど、Twenty thirteenのテーマを見てみるとメニューの右側に検索窓が設置されていて、しかも虫眼鏡のマークをクリックすると検索窓が開くようになっていたのが気にいって、思い切ってテーマを替えてみた。

kensakumado1

kensakumado2
まぁ、このブログ内を検索しようという人は皆無だろうけど、ただの自己満足の世界…。

まずはウィジェットとメニューとヘッダーを設定

Twenty thirteenの場合、ウィジェットは「メインウィジェットエリア」と「副ウィジェットエリア」の2つに分かれていて、メインウィジェットだけにウィジェットを設定すると自動的に1カラムに、副ウィジェットエリアに設定すると設定したウィジェットはサイドバー部分に表示されて自動的に2カラムになる。

簡単に設定できるのでとても楽。とりあえず、このブログは2カラムで使うことにしようと思うから副ウィジェットも設定した。

メニューは、Twenty twelveと変わらない。レスポンシブデザインなので、ウィンドウの幅が狭まると自動的にメニュー▼の表示に切り替わってくれる。

ヘッダーの画像は

サイトの上部に表示する画像をパソコン内からアップロードするか、メディアライブラリから選択できます。画像指定後の切り抜きも可能です。
画像の大きさを1600 × 230ピクセルにするとそのままの大きさで表示されます。

とあったので、1600×230pxの画像を用意してUPしてみた。ウィンドウの幅が狭まると縮小されるのではなく、大きな画像のまま見えない部分が増えていくのでIphoneで見ると何の画像だかよくわからない。

子テーマを作る

Twenty twelveと同じようにテーマを更新すると上書きされていますのでカスタマイズするときは子テーマを作って、そっちをいじるようにする。作り方は前回と同じ。

サムネイルが苦労

トップページに記事の一覧が表示されるようになっていて、アイキャッチで設定した画像がタイトル上部に表示される。前回、アイキャッチの画像は150×150pxに自分で変えてしまったけど、Twenty thirteenでは

functions.phpに

[php]set_post_thumbnail_size( 604, 270, true );[/php]

とあるので、604×270pxで切り取られるようになっているみたい。

自分で設定していた画像サイズよりも大きいので、デザインを変更するか、画像サイズを変更するか迷ったけど、タブレットとかIphoneでサイトを見ると画像が大きいほうがわかりやすかった。

以前やっていたように画像の横にタイトルなどを並べるレイアウトだと、横幅が狭いブラウザで見たときにすごく見にくいことに気づいたから。(あとから考えたら横幅にあわせてタイトルなどを下に回せばいいかもと思ったけど、やっぱりそんな高度なまねはわたしにはできない)

でも、アイキャッチの画像サイズを大きくするのって、アップロードしたときにfunctions.phpに記載がある640×270pxに切り取られるわけだから、画像をいちいち1つずつupしなおして、更にアイキャッチを改めて指定しなければいけない。プラグインなどを使えばサイズの違う画像を作れるだろうけど、記事の数が少ないから1つずつ手作業で進めた。疲れた…。

Twenty twelveで使っていたremはどこに行ったのか?

前回のTwenty twelveでは、CSS3で新しく出てきたフォントサイズの単位remというのがあったけど、Twenty thirteenのstyle.cssを見てみるとremの指定がなくなっている。remというのは、CSS3の新しいフォントサイズ指定。CSS3未対応のブラウザでは使えないから、フォント指定のときはいちいちremとpxと両方cssに指定しないといけなかったのが結構面倒だった。でもTwenty thirteenでは、remがstyle.cssに見当たらない。

少し調べてみると、Twenty thirteenではNormalize.cssというのが使われているらしい。(Normalize.cssとは、デフォルトスタイルシートをいかしてブラウザ間の誤差だけ補正してくれるものらしいけど、まぁ、よくわからない…。)

とりあえずCSSを設定するときは、rem不要ということで。

ウィジェットの「最近の投稿」をトップページのみ非表示にする

トップページは記事の一覧を表示するようにしているので、ウィジェットの「最近の投稿」を表示させちゃうと内容が重複してしまう。だから、トップページだけウィジェットの「最近の投稿」を表示させないようにしたときの備忘録。

プラグインの「Widget Logic」を入れてみた

ウィジェット単位で条件分岐をさせるプラグイン「Widget Logic」を入れた。いつものようにプラグインの新規追加からプラグインを入れて、有効化。

widgetlogic

プラグインを有効化した後にウィジェットの設定画面を開くと、「Widget logic: 」の項目が増えている。ここに条件分岐を入れればウィジェット単位で条件分岐ができる。

条件分岐について

「最近の投稿」の場合は、トップページ以外に表示させたかったので

!is_home()

と最初に設定してみたけど、これだと古い記事をクリックしたpage2やpage3まで非表示になってしまった。条件分岐のcodecをよく理解していなかったので再度調べてみて

!is_home() || is_paged()

「メインブログページには表示しない & ページには表示する」の設定にすると、トップページだけは表示されず、古い記事をクリックしたpage2やpage3には表示されるようになった。

お気に入りアイコン(ファビコン)を作る

そういえば、ファビコンの設定をしていなかった。ファビコンというのはご存知の通り、ブラウザのお気に入りにサイトを登録すると左側に表示される画像のこと。

手順はまず、16×16・32×32・48×48の画像を用意。わたしの場合はJTrimで簡単に作成。

そうして「ファビコン(ファブアイコン)faviconを作ろう!」でファビコン用のicoファイルへ変換。できたicoファイルはWordpressのテーマのフォルダへアップロード。

header.phpの<head>~</head>の間に下記をそのままコピペ。

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

悩んだのは、get_stylesheet_directory_uri();の部分。

bloginfo(‘template_url’);とすると親テーマを見に行ってしまうし、stylesheet_directoryにするとVersion 2.3.1 で廃止だし、調べてみると「WordPress3.0子テーマで、パス指定にbloginfo(‘template_url’)は使えない」を参考にしてget_stylesheet_directory_uri();にした。

あとは、「WordPressのTwenty twelveを試してみた」のときと同様に、「コメントをどうぞ」を消したり、フッターにコピーライトを追加したり、jQueryでページトップに戻るボタンを作ったり、パンくずリストを作ったりした。

またすぐにテーマを変えちゃうかもしれないけどとりあえず。

↓ブログランキングに参加しています。記事が何かの参考になりましたらポチっと下のバナーをクリックしていただけると励みになります♪

Wordpress

Posted by hana