見ての通りサイトのデザインを変えましたが何か？

62026 11

見ての通りサイトのデザインを変えましたが何か？

　当記事タイトルの通り、そして何より今ご覧いただいている通り、サイトのデザインを一新した。

　元々このサイトは、ブログや本格的なWebサイトを簡単に作成・管理できる無料のソフトウェア「WordPress」で作られており、そのデザインテーマを自作の物と差し替えたというわけだ。これに関する一連の作業量はイチから普通にサイトを作るのと大差ないので「Webサイトを簡単に作成」というメリットは失われてしまうものの、管理したり更新したりすることについては引き続き多大な恩恵を得られる。ありがとうWordPressを作ってくれた人よ。

WordPressのテーマを自作して切り替えてみようじゃないか

　それにしても、元々のテーマが結構謎なんよね。

　左上に小さく据えられているサイト名や、画像の下にある記事タイトルよりも遥かに巨大な「ブログ」の文字。これは一体われわれ人類に何を伝えようとしているのだろうか。このサイトが「ブログ」であるということはすなわちパーソナルＩＤに他ならずこの広大なネットの世界を揺蕩うための通行手形がアイデンティティを加速させていやマジでどうでもいいすぐにでも消したい。

　でも消し方がよくわからなんだ。だからもうさっさとデザイン自体を変えちまった。

自作テーマをどんな気持ちで作ったのか何となくご紹介

　「空間を無駄にせず情報を効率よく詰め込む」というようなビジネス的な作り方は自分のサイトとして嫌だったので、余白をたっぷり使って見やすく作ったつもり。そのせいか昔の個人サイトのような見た目になったのは結構気に入っている。今後導入するであろう各種広告も場所を選んでピンポイントに設置するつもりだ。

　全体のデザインはもちろん、記事中に登場する見出しや参考ページへの誘導箇所など、各要素の見た目も整えた。

参考ページ根曲がり竹は叔父からもらってツナと一緒に食べるもの

　こういった細かいところはちょっと手を加えてやると途端にそれっぽくなるのが作業していて面白い。

　liのリストだったり、blockquoteの引用だったり、恐らく今後使うであろう要素だが手を付けていないものもまだたくさんある。全部済ませようとするとキリがないので登場するたびに都度やっていこうかな、と。

HTML作成⇒WordPressの機能を加えてテーマ化⇒切り替えという手順

　参考までに、WordPressのテーマを自作して差し替えるまでの手順を簡単にご紹介しておこう。

　まず何は無くともただのHTMLで組み上げる。

<header class="cf">
	<h1><a href="">マチダの生活</a></h1>
	<nav id="main_nav">
		<ul class="cf">
			<li id="nav_column"><a href="./category.html"><img src="image/common/icons/column_wh.svg" alt="コラムアイコン"></a></li>
			<li id="nav_music"><a href="./category.html"><img src="image/common/icons/music_wh.svg" alt="音楽アイコン"></a></li>
			<li id="nav_cooking"><a href="./category.html"><img src="image/common/icons/cooking_wh.svg" alt="料理アイコン"></a></li>
			<li id="nav_web"><a href="./category.html"><img src="image/common/icons/web_wh.svg" alt="ウェブ関連アイコン"></a></li>
			<li id="nav_book"><a href="./category.html"><img src="image/common/icons/book_wh.svg" alt="本アイコン"></a></li>
		</ul>
	</nav>	
</header>

　ヘッダー周辺を抜粋した。もちろんcss、js、phpなどを含めた「ただのHTML」で組み上げるんだけどね、もちろん。

　そしたらここにWordPressの機能を加えていく。

<header class="cf">
	<?php if ( is_single() ) : ?>
		<p class="sight_title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>">マチダの生活</a></p>
	<?php else : ?>
		<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>">マチダの生活</a></h1>
	<?php endif; ?>
	<nav id="main_nav">
		<ul class="cf">
			<?php 
				$cat_object1 = get_category_by_slug( 'column' );
				$cat_object2 = get_category_by_slug( 'music' );
				$cat_object3 = get_category_by_slug( 'cooking' );
				$cat_object4 = get_category_by_slug( 'web' );
				$cat_object5 = get_category_by_slug( 'books' );
			?>
			<li id="nav_column"><a href="<?php if ( $cat_object1 ) { echo esc_url( get_category_link( $cat_object1->term_id ) ); } ?>">
				<img src="<?php echo get_template_directory_uri(); ?>/image/common/icons/column_wh.svg" alt="コラムアイコン">
			</a></li>
			<li id="nav_music"><a href="<?php if ( $cat_object2 ) { echo esc_url( get_category_link( $cat_object2->term_id ) ); } ?>">
				<img src="<?php echo get_template_directory_uri(); ?>/image/common/icons/music_wh.svg" alt="音楽アイコン">
			</a></li>
			<li id="nav_cooking"><a href="<?php if ( $cat_object3 ) { echo esc_url( get_category_link( $cat_object3->term_id ) ); } ?>">
				<img src="<?php echo get_template_directory_uri(); ?>/image/common/icons/cooking_wh.svg" alt="料理アイコン">
			</a></li>
			<li id="nav_web"><a href="<?php if ( $cat_object4 ) { echo esc_url( get_category_link( $cat_object4->term_id ) ); } ?>">
				<img src="<?php echo get_template_directory_uri(); ?>/image/common/icons/web_wh.svg" alt="ウェブ関連アイコン">
			</a></li>
			<li id="nav_book"><a href="<?php if ( $cat_object5 ) { echo esc_url( get_category_link( $cat_object5->term_id ) ); } ?>">
				<img src="<?php echo get_template_directory_uri(); ?>/image/common/icons/books_wh.svg" alt="本アイコン">
			</a></li>
		</ul>
	</nav>	
</header>

　2行目is_single()っていうのは記事のページかどうかを判別する機能。記事のページでは記事タイトルをh1にしたいので、サイト名である「マチダの生活」はpタグに置き換えてみたり。

　10行目からの$cat_object1～5は、それぞれカテゴリのデータを代入し、その下の各カテゴリページへのリンクを出力させている。これはサイトを作るにあたって用意した開発用領域と、実際に使用する本番領域でカテゴリＩＤが違ってしまったためスラッグを利用せざるをえなかったということなのだがどうでもいいねそれは。

　こんな風にWordPressにはウェブサイトを作る様々な機能が備わっており、それを自作のHTMLに入れ込んでいくわけだ。

　the_permalink()で取得した記事へのリンクをa hrefに入れ、the_title_attribute()で取得した記事タイトルをマークアップ。同様にサムネイル画像や記事のカテゴリ、アップした日付などを取得して自分のデザインに入れ込み、あとはwhileで記事の数だけ繰り返し出力してやれば当サイトのようなトップページが出来上がる。大まかな流れはお伝えできているだろうか。