WordPress レスポンシブ テンプレート 元にサイトを作ってみる その1

公開日: : WordPress, wordpress テンプレート

「レスポンシブ テンプレート の メニューやブログの設置」の記事では、メニューやブログの設置例をやったので、今度はこれを元にデモサイトを作りながら、ざっくり説明の補足をしようと思います。

DEMO を見る

WordPress パーマリンク設定

デフォルトでは「 ?p=123 」のようなページ番号になっていますが、
ユーザビリティやSEOのことを考えると、パーマリンクは以下にしておくのがよいです。

/カテゴリー名/記事タイトル/

設定>パーマリンク設定
カスタム構造にチェックをし、以下を入力します。
/%category%/%postname%/

WordPress テンプレート 表示部分の基本構造

header.php → ヘッダー
home.php → トップページ
sideber.php → サイド
footer.php → フッター
page.php → 固定ページ(デフォルト固定ページテンプレート)
single.php → 個別記事ページ
search.php → 検索結果ページ
archive.php → ブログのカテゴリー・タグ検索などアーカイブ結果
style.css → CSS

<テンプレート階層を使っているファイル>
single-[post_type].php → カスタム投稿の固定ページテンプレートと個別記事
search-[post_type].php → カスタム投稿の検索結果ページ
archive-[post_type].php → カスタム投稿のカテゴリー・タグ検索結果

テンプレート階層とは?

WordPress トップページ home.php

このテンプレートのトップページはhome.phpになります。

Wordpressはhome.php をテーマ内に作ると、index.php ではなくて、home.php でトップページを表示します。
Wordpressでは、この優先順位のことをテンプレート階層と呼んでいます。

home.php
試しに24行目辺りのaタグのダウンロードボタンは不要なので取ってみたりしてください。

WordPress ヘッダー header.php

ロゴを入れる

このテンプレートはフォント化したロゴになっているのでやってみます。
Web アイコンフォント 作り方という記事にそって、ロゴをフォント化しようと思います。

まずロゴ画像を制作し、以前作った「画像からSVGを作ってダウンロードする」でsvgにし、icommoonでfont化します。
icommoon
こんな感じで必要そうなものも選択して、一緒にフォント化しました。
phone は既にテンプレートに入っているので、電話番号を使いたい場合は一緒にダウンロードしてください。

icommoonで出来たダウンロードした、fontフォルダーの中身を
/fonts/フォルダーにアップし、style.css 21行目の以下の部分に張り付けます。

/*------------------------ icomoon ------------------------*/
@font-face {
	font-family: 'icomoon';
・・・・・・

cafe1
以下でロゴのサイズや色を調整します。
style.css

.icon-potdown:before {
	content: "\e603";
	font-size:56px;→ロゴのサイズ追加
	color:#50292B;→ロゴの色追加
}

ヘッダーに背景を入れます。
style.css

header {
	width: 100%;
	height:143px;
	background: repeat-x url('images/header_bg.jpg');padding: 20px 0;
}

このように header.php や style.cssを変更して、ヘッダーを作りました。
cafe2

メイン画像とメニュー

メイン画像を入れる

images/main.png がメインの画像になるので、入れ替えます。

メニューにアイコンを入れる

メニューのリンクに先ほどicommoonからダウンロードした葉っぱのフォント画像を入れたいと思います。
書き出された葉っぱのフォントのコードは以下になります。

.icon-leaf:before {
	content: "\e609";
}

“\e609” の葉っぱのフォントコードを、リンクしたい<a>タグのbeforeに指定します。

style.css に追加します。

.page_item a:before,#nev-menu a:before{
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: "\e609";/*ここに入れたいフォントのコード入力*/
}

cafe0

ニュース記事のカスタマイズ と single.php のテンプレート階層について

トップページのニュース一覧 home.php

このテンプレートでは、既にニュース記事を function.php の中でカスタム投稿で作ってあります。

home.php の以下の部分でカスタム投稿の post_type が top_news の一覧を呼び出し、その下でループして表示しています。

$args = array(
     'post_type' => 'top_news',
	 'paged' => $paged,
); 
query_posts( $args ); ?>

テンプレート階層とは?

single.php はブログサイトの場合、個別記事を表示するのに使います。
WordPressにはテンプレート階層と呼ばれる、テンプレートファイルへアクセス際に自動で振り分けられる優先順位というのがあります。

single.php の テンプレート階層

<優先順位>
1.single-[post_type].php
2.single.php
3.index.php

WordPressでは、single-[post_type].php というファイルを作ると、その post_type の個別記事にアクセスした場合に、single.php でなく、single-[post_type].php に優先的にアクセスされます。

もし single-[post_type].php を作らなければ、ブログと同じ single.php で表示されます。single.php が無い場合は、index.php で表示されます。

このテンプレートの場合は既に以下が作ってあります。
single.php
single-top_news.php → ニュース記事の個別記事
single-blog.php → ブログ記事の固定ページテンプレート(ブログのトップページ)
single-list_01.php → リスト記事の固定ページテンプレート(個別記事とリスト記事両方)

ニュース記事の post_type は top_news という名前にしていて、テンプレート階層を使っています。

という訳で、ニュース記事の個別記事のファイルは、single-top_news.php になっておりますので、カスタマイズしてください。

最後に

次回はカスタム投稿のリスト記事を増やすのをやろうと思います。

関連記事

WordPress レスポンシブ テンプレート 元にサイトを作ってみる その2

DEMO を見る カスタム投稿タイプ functions.php 今回は3つのリストメニュ

記事を読む

レンタルサーバでWordPressを設置してみよう!

WordPress.com 内に、ブラウザだけで無料でサイトを作成出来きるサービスもありますが、Wo

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ(add_filter版)

前回、「WordPress の PHP をちょっと見てみよう Ⅲ」でフックをやったので、カレンダーで

記事を読む

WordPress の PHP をちょっと見てみよう Ⅲ

WordPress の PHP をちょっと見てみよう Ⅲ

前記事の続きで、wp-settings.php の91行目あたりから見ていきます。 次は、wp

記事を読む

WordPress レスポンシブ テンプレート

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

WordPress レスポンシブ テンプレートコーポレート用(シンプル・カスタマイズ用)ダウンロード

記事を読む

WordPress プラグイン「 Search Everything 」

WordPressでカテゴリー名も検索にひっかけるプラグイン「Search Everything」

WordPressでカテゴリーも検索にひっかけるプラグイン「Search Everything 8.

記事を読む

Wordpress VR Test

WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる WordPress.com内で、VR(

記事を読む

WordPress の PHP をちょっと見てみよう Ⅱ

WordPress の PHP をちょっと見てみよう Ⅱ

前記事の続きで、wp-settings.php の68行目あたりから見ていきます。 <今回のピ

記事を読む

WordPress カレンダー カスタマイズ

WordPress カレンダー カスタマイズ

WordPressでカレンダーの表示部分をいじってみようかと思います。 どうやら、カレンダー関

記事を読む

WordPress PHP

WordPress の PHP をちょっと見てみよう Ⅰ

WordPress には、たくさんのファイルが入っています。 ここではテーマ内ではなく、トップ

記事を読む

WordPress wordpress テンプレート

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

マウスドラッグ
マウスドラッグ で ボール投げたい

アイキャッチ画像がマウスドラッグを描いたつもりが、子供の好きなあのボー

Three.jsで360°パノラマ画像を VR させる
Three.jsで360°パノラマ画像を VR させる

Three.jsで360°パノラマ画像を VR させる VRを作るの

Wordpress VR Test
WordPress で VR させて、360°のパノラマ画像を表示する

WordPress.com内ショートコードで VR させる Word

画像加工 cropbox.js
写真をアップロードして切り抜きが出来るcropboxにタッチイベントを付けてみる

Git Hub の cropbox 写真をアップロードしてカット出来

画像の拡大・縮小 タッチイベント
画像の拡大縮小を javascript の touch イベントでやってみる

画像の幅と高さを取得 まずは、neko.jpg という画像を用意して

→もっと見る

にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
にほんブログ村 FC2 Blog Ranking
PAGE TOP ↑