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 自作フォーム その3(チェックボックスなど)

以前、WordPress 自作フォーム その1の記事で Wordpress で自作フォームを作ってみ

記事を読む

Wordpress 自作フォーム

WordPress 自作フォーム その1(サンプルと設置)

Wordpress でプラグインを使わずにフォームをやってみます。 簡単に名前、メールアドレス、メ

記事を読む

Wordpress 自作フォーム 2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

WordPress 自作フォーム その2(注意点とエラー:This is somewhat embarrassing, isn’t it? など)

前回(WordPress 自作フォーム 1)のつづきです。 今回は細かいところや注意点とエラーなど

記事を読む

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

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

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

記事を読む

Wordpress VR Test

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

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

記事を読む

Wordpress 独自テーブル 商品名と料金

WordPress 独自テーブル

Wordpress で独自テーブルを作ってみようと思います。 独自テーブルのデータ 今回のデ

記事を読む

WordPress プラグイン「 Search Everything 」

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

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

記事を読む

WordPress Twenty Seventeen function.php

WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテンプレートには不要ですが、よくわ

記事を読む

WordPress wordpress テンプレート

Message

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

WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)
WEBページをアプリっぽくする(サービスワーカーでホーム画面に追加)

前回作ったお絵かきページを、簡単にアプリっぽくしようと思います。 具

canvas タグでお絵描き(レスポンシブ)
canvas タグでお絵描き(レスポンシブ)

簡単なメモ張みたいなものが欲しいので作ってみました。 canvas

フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)
フルスクリーンを CSS だけで、vw, vh, vmin, vmax を試してみる(スクロールバーも消したい)

ビューポートの単位 vw, vh, vmin, vmax CSS で

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その2

前回の続きです。 次のスターターコンテンツは、今回のシンプルテン

WordPress Twenty Seventeen function.php
WordPress twentyseventeen の function.php を見る – その1

WordPress の最低限の機能だけのシンプルなテンプレートが欲しか

→もっと見る

    • 201901
      Mon Tue Wed Thu Fri Sat Sun
      123456
      78910111213
      14151617181920
      21222324252627
      28293031
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑