WordPressのTwenty Fourteenをカスタマイズ

WordPressの2014年のデフォルトテーマ「Twenty Fourteen」のテーマ構成やそのカスタマイズ方法を紹介。

 

Twenty Forteen

名前の通り、WordPressの2014年のデフォルトテーマです。

2013年年末に登場しました。

 

最大の特徴はデスクトップよりもモバイルを優先(モバイルファースト)したとレスポンシブデザインです。

 

screenshot2014

 

世の中には多くのレスポンシブWebデザインのWordPressテーマがあります。WordPressの公式テーマの中にもいくつかありました。

しかし、「Twenty Fourteen」それらのテーマとは一線を画す作りです。

 

「Twenty Fourteen」は特にスマートフォン表示がよく出来てます。

これは非常に重要です。

レスポンシブWebデザインでもスマートフォンだと見にくいサイト(ブログ)って結構ありますからね…

 

「Twenty Fourteen」はスマートフォンでもとても見やすいので素晴らしいです。


Twenty Fourteenの構成

「Twenty Fourteen」を構成するテンプレートファイルです。

大分多いですが、これを理解しておくとカスタマイズも楽になるはず…

 

 

各ページ用ファイル

各ページを出力するファイル。基本的なファイルなので他のテーマでも見られます。

デザインのカスタマイズをするならこれらをカスタマイズすることが多いと思います。

 

  • index.php : トップページ
  • page.php : 固定ページ
  • single.php : 投稿の個別ページ
  • archive.php : アーカイブページ
  • category.php : カテゴリーアーカイブ
  • tag.php : タグアーカイブ
  • author.php : 著者ページ
  • comments.php : コメント
  • image.php : 画像の添付ファイルのページ
  • search.php : 検索結果ページ
  • 404.php : 404ページ

 

 

コンテンツ (基本)

投稿内容を出力するファイル。

これらを呼び出す記述が上記のファイルの中に書かれているはず。

 

  • content.php : コンテンツ表示。single、index、archive、searchで共通。
  • content-page.php : 固定ページのコンテンツ。
  • content-none.php : 投稿がない場合。

 

 

コンテンツ (フォーマット別)

あまり使われないですが、各「投稿フォーマット」用のファイル。

 

  • content-aside.php : アサイド
  • content-audio.php : 音声
  • content-gallery.php : ギャラリー
  • content-image.php : 画像
  • content-link.php : リンク
  • content-quote.php : 引用
  • content-video.php : 動画
  • taxonomy-post_format.php : 投稿フォーマット別のテンプレートの読み込みを定義

 

 

ヘッダー/フッター/サイドバー

ヘッダーやフッター、サイドバー用のファイル

 

  • header.php : ヘッダー
  • footer.php : フッター
  • sidebar.php : 左サイドバー
  • sidebar-content.php : 右サイドバー
  • sidebar-footer.php : フッターウィジェットエリア

 

 

おすすめコンテンツ

ヘッダーに大きく表示できるおすすめコンテンツ用のファイル。

 

  • featured-content.php : おすすめコンテンツを表示
  • content-featured-post.php : おすすめコンテンツを表示

 

 

固定ページ属性

固定ページの各ページ属性用のファイルです。

  • page-templates/contributors.php : 参加者ページ
  • page-templates/full-width.php : 全幅ページ

 

 

スタイルシート

 

  • style.css : スタイルシート
  • rtl.css : 右から左へ書く言語用のスタイルシート
  • css/editor-style.css : 投稿エディタにスタイルを適用
  • css/ie.css : ie用のCSS

 

 

 

各機能用phpファイル

WordPressやTwentyFourtennの機能が記述されているファイル。

下手にいじると画面が真っ白になります。注意しましょう。

 

  • functions.php : 基本機能用ファイル
  • inc/back-compat.php : WP3.6以下への対応を記述
  • inc/custom-header.php : カスタムヘッダー
  • inc/customizer.php : テーマカスタマイザー
  • inc/featured-content.php : おすすめコンテンツ
  • inc/template-tags.php : テンプレートタグ
  • inc/widgets.php : ウィジェット

 

 

デザイン他

他、目立たないけど非常に便利なファイル。

 

  • genericons : テーマで使用されているアイコンフォント
  • languages : 翻訳ファイル
  • js : JSファイル
  • images : テーマで使用する画像ファイル
  • screenshot.png : 管理画面で表示されるスクリーンショット用のpngファイル。

 

 

 

Twenty Fourteenのカスタマイズ

WordPressのデフォルトテーマ「Twenty Fourteen」は少々特殊なテーマです。

その中でも多くの方が気になるであろうポイントを修正する方法を紹介します。

 

 

コンテンツ(本文)の幅を広くする

「style.css」を開きます。その中の「6.0」を見てください。

/**
 * 6.0 Content
 * -----------------------------------------------------------------------------
 */
.content-area {
 padding-top: 48px;
}
.hentry {
 margin: 0 auto 48px;
 max-width: 672px;
}
.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
 margin: 0 auto;
 max-width: 474px;
}
.page-content {
 margin-bottom: 48px;
}

この中の「max-width」が本文幅を指定しています。

 max-width: 474px;
}

 

この474pxを必要な幅に書き換えてあげれば変わります。

 

 

タイトル等の文字が全て大文字になってしまうのを防ぐ方法

「Twenty Fourteen」では記事のタイトル等、一部の文字が全て大文字で表示されます。

これを「大文字は大文字、小文字は小文字」にする方法です。

 

アルファベットが全て大文字になってしまう原因はCSSにあります。

 

CSS の下記の記述が文字を大文字にしています。

text-transform: uppercase;

これを

text-transform: none;

とするとその箇所が大文字、小文字それぞれ入力した通りになります。

 

ちなみに

text-transform: uppercase;

は21カ所ほどあります。

 

タイトルであったり、メニューだったりイロイロです。

全部直したい方はCSSをダウンロードするなどして一発置換した方が早いかもしれません。

 

 

タイトルが大文字になってしまうのを直す。

試しに大文字になっているタイトルを修正してみます。

 

タイトルの文字を修正するには、「style.css」の「6.2」を開きます。

 

/**
* 6.2 Entry Header
* -----------------------------------------------------------------------------
*/
.entry-title {
 font-size: 33px;
 font-weight: 300;
 line-height: 1.0909090909;
 margin-bottom: 12px;
 margin: 0 0 12px 0;
 text-transform: uppercase;
}

 

この中の

 text-transform: uppercase;
}

↑を↓にします。

 text-transform: none;
}

 

これで大文字で入力したものは大文字に、小文字で入力したものは小文字になります。

 

 

こんな感じでCSSを弄れば「TwentyFourteen でアルファベットが勝手に大文字になる現象」を修正できます。

 

 

 

左寄せから中央配置にする方法

スマートフォンやタブレット等では問題ありませんが、「TwentyFourteen」はサイト全体が左に寄ってます。

大きいディスプレイで見ると、右側に大きくスペースが空いてしまいます。

 

これを左寄りではなく、真ん中にあわせる方法です。

 

 

CSS

CSSでカンタンです。

CSSに以下を記述してください。

 

.site {
 margin-left: auto;
 margin-right: auto;
 }

これでサイトが真ん中に配置されます。

 

 

これで横幅が広いパソコンやモニターでもサイトが見やすくなると思います。

 

 

 

まとめ

デフォルトテーマとは思えないくらいよく出来たテーマです。

特にレスポンシブの動きが素晴らしく、スマートフォンビューは特に良いですね。


関連記事

  1. WordPressのSEO効果を高めるパーマリンクの設定方法

  2. WordPressとは何か?|魅力や使い方、メリットなど。

  3. WordPressの管理画面が「W3 Total Cache」によって遅くなる現象

  4. WordPressの多言語プラグイン「WPML」で起こったトラブル一覧

  5. ワードプレスのテーマをハミングバードに変えればPVが増える!?

  6. WordPressをMAMPでMacのローカルにインストールする方法

  7. WordPressをプラグインでバックアップする方法

  8. WordPressのデフォルトテーマ一覧 (2010~2016)

PAGE TOP