Webデザイナーを目指す人のブログ

Webサイト作成時に勉強したことの備忘録

Wordpress サイト構築

オリジナルテーマを作る〜固定ページを作る〜

投稿日:

                                                                                                                                 

第9回目のWordPressのサイト作り
今回が最終回になります。

前回の記事までの記事はこちらから
WordPress オリジナルテーマを作る〜ヘッダー〜
WordPress オリジナルテーマを作る〜ヘッダーその2〜
WordPress オリジナルテーマを作る〜メイン部分〜
WordPress オリジナルテーマを作る〜メイン部分その2〜
WordPress オリジナルテーマを作る〜サイドとフッター〜
WordPress オリジナルテーマを作る〜テーマに分割~
WordPress オリジナルテーマを作る〜記事一覧を作る~
WordPress オリジナルテーマを作る〜記事を表示するページの作成~

固定ページを作成する

今日は固定ページを作っていきます。
固定ページはpage.phpで作ります。

内容は殆どsingle.phpと変わりません。
single.phpからをコピーしてpage.phpを作りましょう。

まずは投稿日やカテゴリーといった
投稿情報を削除します。

そして記事はありません。
となっている部分を
ページはありません。
に修正すればとりあえず完成です!

<!-- page.php -->
<?php get_header(); ?>
	<div class="container">
		<div class="main">
			<div class="post">

			<?php
			if (have_posts()) :
				while (have_posts()) :
					the_post();
			?>

				<div class="post-content">
					<p class="ttl"><a href="<?php the_permalink(); ?>"></a><?php the_title(); ?></p>
					<div class="post-meta">
						<ul>
							<li><i class="fa fa-clock-o" aria-hidden="true"></i><?php echo get_the_date_date(); ?></li>
							<li><i class="fa fa-folder-open-o" aria-hidden="true"></i><? php the_category(', '); ?></li>
						</ul>
					</div>
					<div class="post-txt">
						<p><?php the_content(); ?></p>
					</div>
				</div>
			</div>

			<?php
				end while;
			else:
			?>
			<p>ページはありません</p>

			<?php
			endif;
			?>
		</div>
		<?php get_sidebar(); ?>
	</div>
<?php get_footer(); ?>	

これでOK!
完成です!!!!
ソースを組むのに時間がかかりますが、
WordPressに分解する事自体は
思っていたよりも簡単でした
(基礎だけだから)

これからも経験値を増やしていこうと思います!

せば!

-Wordpress, サイト構築

執筆者:


comment

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

関連記事

no image

【Javascript】組み込みオブジェクト〜StringオブジェクトとArrayオブジェクト〜

組み込みオブジェクト 今日は組み込みオブジェクトについて見ていきます。 昨日書いた記事ではオブジェクトを自分で作りましたが、今日まとめていく組み込みオブジェクトというのは、JavaScripがあらかじ …

no image

【Javascript】関数

関数 とうとうやって来ました−!関数のお時間です。 さて、そもそも関数が何者なのか。 昔学校で習った関数といえば x=2yの場合において y=5だったらxの値はいくらか? みたいなやつでした。 こんな …

no image

CSS応用編 vol.01

CSSで三角形を作る 今日はCSSで三角形を作る方法についてみていきます。 三角形を作ることは結構あるんですが、その度にいちいち調べて書いてたので、 本質を理解する+それでも忘れちゃった時用の備忘録と …

no image

bootstrap vol.04

bootstrapの機能を使う 今回がbootstrapのまとめのラストになります。 今回はタブの切り替えやカルーセルスライダーの実装の仕方について見ていきます。 タブの切替をする ul要素にclas …

no image

【jQuery】attr、data、書き換え

attr 今日はまずはじめにhtmlの属性の値を取得したり変更したりすることができるアトリビュートメソッド(attr)を見ていきます。 属性を取得するときは $(“要素”).a …