ワードプレスオリジナルテーマ作り方④ トップページ作成 | 福岡のホームページ制作はマリオ君にお任せ

為にならないブログ

見出しおじさん

BLOG

ワードプレスオリジナルテーマ作り方④ トップページ作成

2023年05月22日

ワードプレスオリジナルテーマ作り方④ トップページ作成

home.phpでトップページ作成

今回はhome.php（トップページが表示されるファイル）のbodyタグの中身を書いていきます。
まずはレイアウトの確認・こんな感じにします。

レイアウト

とりあえずhtmlを書きました。
こんな感じ

<body>

<div class="bwrap">
	<header>
		<h1>サイトのタイトルを表示させます</h1>
		<p class="logo">
			<a href="index.html">
				<img src="img/rogo01.svg" alt="サイトのタイトルを表示させます">
			</a>
		</p>
	</header>
	<!--header終わり-->
	<nav>
		<ul>
			<li><a href="hp.html">ホームぺージ制作</a></li>
			<li><a href="works.html">制作実績</a></li>
			<li><a href="price.html">料金</a></li>
			<li><a href="flow.html">ご依頼の流れ</a></li>
			<li><a href="feature.html">マリオ君の特徴</a></li>
			<li><a href="question.html">よくある質問</a></li>
			<li><a href="company.html">会社概要</a></li>
			<li><a href="contact.html">お問い合わせ</a></li>
		</ul>
	</nav>
	<!--nav終わり-->
	<article>
		<section class="blogbox">
			<p class="topi">
			現在自社ホームぺージ制作進行中です。<br>
				もうすこしちゃんとしたホームぺージ作れますので、<br>
ご依頼はお問い合わせフォームよりご連絡ください。<br>
お仕事ください。サイトから依頼きたらボーナスでるんや。
			</p>
			<h2>ブログ</h2>
			<ul>
				<li>
					<a href="kiji.html">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<p class="bassui">ブログ記事を抜粋した文章を表示</p>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
			</ul>
			<p class="btn"><a href="blog.html">ブログの記事一覧はこちら→→</a></p>
		</section>
		<!--blogbox終わり-->
	</article>
	<!--article終わり-->
	<footer>
		<nav>
			<ul>
				<li><a href="hp.html">ホームぺージ制作</a></li>
				<li><a href="works.html">制作実績</a></li>
				<li><a href="price.html">料金</a></li>
				<li><a href="flow.html">ご依頼の流れ</a></li>
				<li><a href="feature.html">マリオ君の特徴</a></li>
				<li><a href="question.html">よくある質問</a></li>
				<li><a href="company.html">会社概要</a></li>
				<li><a href="contact.html">お問い合わせ</a></li>
			</ul>
		</nav>
		<!--nav終わり-->
	</footer>
	<!--foote終わりr-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
</body>

こんな感じでちゃちゃっと

見本はこちら

この見本のサイトをワードプレス化していったん作っていきたいと思います。

簡易的気に一回作ってそのあとちゃんと作り直すって流れで行きます。

今後の記事は上記の見本サイトをワードプレス化するまでをいったん説明したいと思います。

話は少し変わりますが、上記のサンプルサイトはsample01というフォルダに格納されていてリンク先に飛んでいただきURLをみていただければわかると思いますが
mariokun.com/sample01/となっています。

何が言いたいかというと前回ワードプレスをサブディレクトリーに入れた効果が早速出ているというとこです。サブディレクトリーにワードプレスをインストールするのはセキュリティーや複数のワードプレスのインストールや管理のしやすさのためですが管理のしやすさの効果が発揮されています。

ファイル構成

こんな感じ。ワードプレスがインストールされているcmswpフォルダと同じ場所にsample01フォルダを置いて完成。もしワードプレスをサブディレクトリーでなく直下にいれていたら

ファイル構成

この中にsample01フォルダを置くことになります。なんかごちゃごちゃしてますね。
サブディレクトリーにインストールしておいて管理も楽です。

自社ホームページワードプレスをインストール
関連こっちもみてね
自社ホームページワードプレスをインストール
ワードプレスサイトアドレスを直下にFTPソフトインストール
関連こっちもみてね
ワードプレスサイトアドレスを直下にFTPソフトインストール

それでは本題にもどります。

上記のHTMLをざっと説明していきます。

一番外をdivタグクラス名bwrapで囲ってます。CSSは割愛しますが、max-width1240pxが入っています。

bwrapの箱の中にheader（ページの中の頭に当たる部分）をつくってその中に最重要のh1タグとロゴをいれています。

その下にナビゲーション

その下articleにはブログ記事を６件表示させそれ以上は一覧はこちらでblogという固定ページを作ってそこにリンクしています。

３７行目のkiji.htmlにリンクが張っていますが上記のサンプルで記事の詳細ページを見てもらうために作っています。のちにsingle.phpに記述するページです。

で最後にぺージ下部footer(ページ下部の部分）に再度ナビゲーションを入れていります。こちらのナビゲーションはheaderのナビゲーションと同じなので共通のパーツにします。

本来トップページはホームページを構成するすべてのページの抜粋や一番目立たせるコンテンツを表示させたり、疑問を投げかけて解決に向かう同線など最重要のページになる部分ですが

今回はひとまずブログだけです。本番はめちゃかっこよくなる予定です。（たぶん）

それではHTMLにワードプレス用のタグを追加していきます。

ワードプレスのタグを追加・置き換え

リンク

まずはリンクです

リンクは

<?PHP echo esc_url( home_url() ); ?>/

でURLを読み込んでリンクさせます。

当サイトに例えると
https://mariokun.com/が出力されます

７行目を

<a href="index.html">
<a href="<?PHP echo esc_url( home_url() ); ?>">

で完成。

もういっこだけ１５行目を

<li><a href="hp.html">ホームぺージ制作</a></li>
<li><a href="<?PHP echo esc_url( home_url() ); ?>/hp/">ホームぺージ制作</a></li>

.htmlがいらなくなるので/にします。

要約すると

好き名前.htmlの前に

<?PHP echo esc_url( home_url() ); ?>

をいれて

.htmlを

/

にするです。

画像

次は画像のパスにワードプレスのタグを追加していきます。

画像のパスを出力するワードプレスタグは

<?PHP echo esc_url( get_template_directory_uri() ); ?>

です。

当サイトに例えると

これ
https://mariokun.com/インストールしたサブディレクトリー/wp-content/themes/オリジナルテーマのフォルダ名/img/

になります。

オリジナルテーマのフォルダはオリジナルテーマを格納するフォルダ名が自動的に出力されます。

８行目のimgをワードプレスタグで置き換えます。

<img src="img/rogo01.svg" alt="サイトのタイトルを表示させます">

を

<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/rogo01.svg" alt="サイトのタイトルを表示させます">

にです

要約すると

srcのパスの前に

<?PHP echo esc_url( get_template_directory_uri() ); ?>/

をいれるだけです。

/を入れるのわすれずに！！

次はサイトとタイトルを表示させるです。

5行目のh1と

８行目のimgの中のaltにあるので

そちらをワードプレスタグに置き換えます。
こっちの作業は効率化の話で、上記2つのリンクの変更・画像のパスの変更とは違い、絶対やらないといけないものではありません。（でもやっとくともしタイトルが変更になった場合など自動で変わってくれます。）

上記のリンクと画像はやらないとリンクは飛ばないし、画像は表示されません。

それではやっていきます前回の記事のhead内の説明の時に出てきたタグをいれます。

<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>

これをいれます。
ぺージのタイトルの右側に縦線いれてサイトのタイトルを出力タグです。

これがSEO的に正解とかではなく、皆さんでいろいろ試行錯誤してタグを出力されてみてください。マリオ君のSEO風味はこれが多いみたいです。

完成はこちら

<h1><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></h1>
<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/rogo01.svg" alt="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">

ブログの記事の取得・書き出しは最後にするので

現時点でのファイルはこんな感じになりました。前回のhome.phpに上記変更したものを合わせてこちらになります。

<?PHP get_template_part("parts/header");//ここでヘッダーよみこんでるよ?>
	
	
<body>

<div class="bwrap">
	<header>
		<h1><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></h1>
		<p class="logo">
			<a href="<?PHP echo esc_url( home_url() ); ?>/">
				<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/rogo01.svg" alt="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
			</a>
		</p>
	</header>
	<!--header終わり-->
	<nav>
		<ul>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/hp/">ホームぺージ制作</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/works/">制作実績</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/price/">料金</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/flow/">ご依頼の流れ</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/feature/">マリオ君の特徴</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/question/">よくある質問</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/company/">会社概要</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/contact/">お問い合わせ</a></li>
		</ul>
	</nav>
	<!--nav終わり-->
	<article>
		<section class="blogbox">
			<p class="topi">
			現在自社ホームぺージ制作進行中です。<br>
				もうすこしちゃんとしたホームぺージ作れますので、<br>
ご依頼はお問い合わせフォームよりご連絡ください。<br>
お仕事ください。サイトから依頼きたらボーナスでるんや。
			</p>
			<h2>ブログ</h2>
			<ul>
				<li>
					<a href="kiji.html">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
			</ul>
			<p class="btn"><a href="<?PHP echo esc_url( home_url() ); ?>/blog/">ブログの記事一覧はこちら→→</a></p>
		</section>
		<!--blogbox終わり-->
	</article>
	<!--article終わり-->
	<footer>
		<nav>
			<ul>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/hp/">ホームぺージ制作</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/works/">制作実績</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/price/">料金</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/flow/">ご依頼の流れ</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/feature/">マリオ君の特徴</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/question/">よくある質問</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/company/">会社概要</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/contact/">お問い合わせ</a></li>
			</ul>
		</nav>
		<!--nav終わり-->
	</footer>
	<!--foote終わり-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
	
	

<?php wp_footer(); ?>
</body>
</html>


共通になりそうな場所をパーツ化

お次はパーツ化をします。

全ページ共通になりそうな部分はページ上部（bodyの開始からheaderとnaviの部分）

<body>

<div class="bwrap">
	<header>
		<h1>サイトのタイトルを表示させます</h1>
		<p class="logo">
			<a href="index.html">
				<img src="img/rogo01.svg" alt="サイトのタイトルを表示させます">
			</a>
		</p>
	</header>
	<!--header終わり-->
	<nav>
		<ul>
			<li><a href="hp.html">ホームぺージ制作</a></li>
			<li><a href="works.html">制作実績</a></li>
			<li><a href="price.html">料金</a></li>
			<li><a href="flow.html">ご依頼の流れ</a></li>
			<li><a href="feature.html">マリオ君の特徴</a></li>
			<li><a href="question.html">よくある質問</a></li>
			<li><a href="company.html">会社概要</a></li>
			<li><a href="contact.html">お問い合わせ</a></li>
		</ul>
	</nav>
	<!--nav終わり-->


とぺージ下部の部分

	<footer>
		<nav>
			<ul>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/hp/">ホームぺージ制作</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/works/">制作実績</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/price/">料金</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/flow/">ご依頼の流れ</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/feature/">マリオ君の特徴</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/question/">よくある質問</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/company/">会社概要</a></li>
				<li><a href="<?PHP echo esc_url( home_url() ); ?>/contact/">お問い合わせ</a></li>
			</ul>
		</nav>
		<!--nav終わり-->
	</footer>
	<!--foote終わり-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
	
	

<?php wp_footer(); ?>
</body>
</html>

になりそうなので上記をパーツ化したいと思います。


パーツを読み込むタグは前回もやりましたがこちらですね

<?PHP get_template_part("フォルダ名/ファイル名.phpの拡張子なし");?>


ぺージ上部部分をhead.phpというファイル（名前は好きな名前で）を作ってコピーして、partsフォルダに入れます。

ページ下部部分もfoot.phpというファイル（名前は好きな名前で）を作ってコピーして、partsフォルダに入れます。

こんな感じ

<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>


で、ここでもう一声で、さらにページ上部とぺージ下部ともにnaviの部分がさらにパーツ化できるので

	<nav>
		<ul>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/hp/">ホームぺージ制作</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/works/">制作実績</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/price/">料金</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/flow/">ご依頼の流れ</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/feature/">マリオ君の特徴</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/question/">よくある質問</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/company/">会社概要</a></li>
			<li><a href="<?PHP echo esc_url( home_url() ); ?>/contact/">お問い合わせ</a></li>
		</ul>
	</nav>

の部分をパーツの中でさらにパーツ化します。

ナビ部分はnavi.phpというファイル（名前は好きな名前で）を作ってコピーして、partsフォルダに入れます。

<?PHP get_template_part("parts/navi");//ここでnavi.phpよみこんでるよ?>

head.phpのファイルの中身は

<body>

<div class="bwrap">
	<header>
		<h1><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></h1>
		<p class="logo">
			<a href="<?PHP echo esc_url( home_url() ); ?>/">
				<img src="<?PHP echo esc_url( get_template_directory_uri() ); ?>/img/rogo01.svg" alt="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>">
			</a>
		</p>
	</header>
	<!--header終わり-->
  <?PHP get_template_part("parts/navi");//ここでnavi.phpよみこんでるよ?>
	<!--nav終わり-->

foot.phpの中身は

	<footer>
		<?PHP get_template_part("parts/navi");//ここでnavi.phpよみこんでるよ?>
	<!--nav終わり-->
	</footer>
	<!--foote終わり-->
</div>
<!--bwrap全部を囲っているdiv終わり-->
	
	

<?php wp_footer(); ?>
</body>
</html>

になりました。
これで今のhome.php全体は

<?PHP get_template_part("parts/header");//ここでheader.phpよみこんでるよ?>
<?PHP get_template_part("parts/head");//ここでhead.phpよみこんでるよ?>
<article>
		<section class="blogbox">
			<p class="topi">
			現在自社ホームぺージ制作進行中です。<br>
				もうすこしちゃんとしたホームぺージ作れますので、<br>
ご依頼はお問い合わせフォームよりご連絡ください。<br>
お仕事ください。サイトから依頼きたらボーナスでるんや。
			</p>
			<h2>ブログ</h2>
			<ul>
				<li>
					<a href="kiji.html">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
				<li>
					<a href="記事のページに">
						<h3>ブログ記事のタイトル</h3>
						<p class="day">投稿日時</p>
						<div class="bassui">ブログ記事を抜粋した文章を表示</div>
						<ul>
							<li>カテゴリー</li>
						</ul>
						<p class="more">詳しく見る→</p>
					</a>
				</li>
			</ul>
			<p class="btn"><a href="<?PHP echo esc_url( home_url() ); ?>/blog/">ブログの記事一覧はこちら→→</a></p>
		</section>
		<!--blogbox終わり-->
	</article>
	<!--article終わり-->
<?PHP get_template_part("parts/foot");//ここでfoot.phpよみこんでるよ?>

になっています。

ブログの部分の説明は後日させていただきます。

最後に現段階での今のファイル構成を
全体は

ファイル構成

partsフォルダのなかは

ファイル構成

です。

長くなりましたが、トップページにあたるhome.phpのHTMをワードプレスのタグに置き換えてみました。

次回は重要な投稿の記事をトップページに出力するをやりたいと思います。

それではまた。

一覧へ
こっちもみて！関連記事

カテゴリー

人気!?記事

気になったら
連絡してね!

すいません

お電話は出れないことが多いので
ラインでもしもし・メールでもしもしが推奨です。

お時間をとらせていただきゆっくり
お電話させていただきます。

©Copy Rights MARIOKUN.All Rights Resarved.
Page Top
お問い合わせ

どうぞおじさん

作業中はお電話は出れないことが多いのでライン・メールでもしもしが推奨です。

お電話は出れないことが多いの折り返し致します。