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

WordPress 自作フォーム その3(チェックボックスなど)

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

記事を読む

Wordpress 自作フォーム

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

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

記事を読む

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

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

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

記事を読む

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

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

記事を読む

WordPress Twenty Seventeen function.php

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

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

記事を読む

WordPress Twenty Seventeen function.php

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

WordPress の最低限の機能だけのシンプルなテンプレートが欲しかったので、作っておくことにしま

記事を読む

リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存してくれる WordPress の

記事を読む

ロリポップでWordPressのPHPバージョンを5から7にする

ロリポップでWordPressのPHPバージョン7.1に変更後「サイトに技術的な問題が発生しています。」

WordPress.org の推奨環境 PHP7以上 MySQL5.6以上またはMaria

記事を読む

wordpress カスタム投稿で 2ページ目以降が404

wordpress カスタム投稿で 2ページ目以降が404になってしまう

wordpress のカスタム投稿で、ニュースのページを作っていました。 ニュース一覧で、ペー

記事を読む

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

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

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

記事を読む

WordPress wordpress テンプレート

Message

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

DNSサーバーとは
ドメインとは?DNSサーバーとは?

ドメインとは? ドメインとは? ドメインとは、インターネット上のネ

javascriptで複数同じ名前のformの値を取得する
javascriptで複数同じ名前のformの値を取得する Cannot read property ‘value’ of undefined

Javascript で value の値を取得する このようなHT

リビジョンを削除し、テーブルを最適化してDBの容量を削減
WordPress リビジョンを削除し、テーブルを最適化してDBの容量を削減

WordPress リビジョン機能 リビジョンは過去の記事を保存して

Javascript let const アロー関数 クラス
Javascript ES5,6 の新機能(letとconst,アロー関数,クラスなど)

ESとはECMASCriptの略で、ECMA という国際的な標準化機関

Strict モード JavaScript
Javascript Strictモード “use strict”;

Strict モード(厳格モード) Strict モードとは、ECM

→もっと見る

    • 202105
      Mon Tue Wed Thu Fri Sat Sun
      12
      3456789
      10111213141516
      17181920212223
      24252627282930
      31
    にほんブログ村 IT技術ブログへ にほんブログ村 IT技術ブログ PHPへ にほんブログ村 IT技術ブログ WordPressへ
    にほんブログ村 FC2 Blog Ranking
    PAGE TOP ↑