デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

WordPressオリジナルテーマを作ってみよう シンプルなブログサイト

スポンサーリンク

1.記事を読み込む(ループ)

1-1.記事の個別ページを作る

まずは、シンプルに記事のタイトル、公開日やカテゴリー、記事の本文を表示するページを作ってみましょう。

index.phpに以下のコードを記載しましょう。

index.php

【コード解説】
■5行目:
titleタグは、bloginfo( ‘name’ )とwp_title()というWordPressテンプレートタグを使って、「サイトのタイトル」と「現在のページのタイトル」を取得しています。

■6行目:
スタイルシートは、get_stylesheet_uri()を使って、style.cssを読み込んでいます。

■14行目〜29行目:
ループ処理を使って、WordPressで投稿した記事を読み込みます。

■17行目:
ループ処理の中で、the_title()を使って、記事タイトルを表示させます。

■21行目、23行目:
ループ処理の中で、get_the_date()、the_category( ‘, ‘ );を使って日付とカテゴリーを表示させます。

■26行目:
ループ処理の中で、the_content()を使って、記事の本文を表示させます。

1-2.トップページを作る

次は、記事のアイキャッチ画像や概要文を表示するトップページを作成しましょう。

以下コードの黄色でハイライトされている部分をindex.phpに追加しましょう。

index.php

【コード解説】
■17行目、19行目、30行目、34行目、43行目:
is_single()を使って、記事の個別ページとトップページを切り分けています。else側のルートがトップページ用の処理になります。

■20行目、36行目、39行目:
aタグでthe_permalink()を指定し、クリックすると記事の個別ページへジャンプするようになります。

■36行目:
has_post_thumbnail()を使って、記事にアイキャッチ画像があるかどうかをチェックしています。アイキャッチ画像が設定されている場合は、the_post_thumbnail( ‘large’ )を使ってアイキャッチ画像を表示させています。

■43〜54行目:
記事の個別ページの場合は、previous_post_linkを使って前後の記事のリンクボタンを表示させています。

■60〜64行目:
ページ数が2ページ以上の場合は、前後のページのリンクボタンを表示させています。

次にfunctions.phpに以下コードを記載しましょう。

functions.php

【コード解説】
■17行目:
add_theme_support( ‘post-thumbnails’ );をfunctions.php内に記載することで、WordPressの記事投稿画面でアイキャッチ画像を設定できるようになります。

2.ヘッダーとフッターを作る

次にサイトにヘッダー部とフッター部を追加しましょう。

以下コードの黄色でハイライトされている部分をindex.phpに追加しましょう。

index.php ※ヘッダー部分

index.php ※フッターー部分

【コード解説】
■4行目、8行目:
bloginfo( ‘name’ )を使って、WordPress管理画面の「設定」→「一般」で設定された「サイトのタイトル」を表示させています。

■5行目:
bloginfo( ‘description’ )を使って、WordPress管理画面の「設定」→「一般」で設定された「キャッチフレーズ」を表示させています。

3.メニューを追加する

次に、WordPressから設定できるメニューやウィジェットを追加してみましょう。

以下コードの黄色でハイライトされている部分をindex.phpに追加しましょう。

index.php

【コード解説】
■6行目、11行目:
wp_nav_menu( ‘theme_location=navigation’ )を使って、WordPress管理画面の「外観」→「メニュー」で設定したメニューを表示させています。

■8行目:
php dynamic_sidebar()を使って、WordPress管理画面の「外観」→「ウィジェット」で設定したサイドバーを表示させています。

以下コードの黄色でハイライトされている部分をfunctions.phpに追加しましょう。

functions.php

【コード解説】
■4行目:
WordPress管理画面で「外観」→「ウィジェット」を表示させるための処理です。

■7行目:
WordPress管理画面で「外観」→「メニュー」を表示させるための処理です。

ここまで出来たらブログサイトの基本構造(骨組み)は完成です。
あとは、CSSでデザインを整えます。
次ページで僕が設定したCSSを紹介します。

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

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

CAPTCHA


ページトップボタン