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

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

サイト構築

WordPress オリジナルテーマを作る〜記事を表示するページの作成〜

投稿日:

                                                                                                                                 

第8回目のWordPressのサイト作り

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

記事の中身を作成する

今日はsingle.phpを作りました。
single.phpは投稿した記事を表示するページです。
ほとんどindex.phpと変わらないので、まずはindex.phpをコピーして複製します。

それからサムネイルに関する部分をまるっと削除して
the_excerpt();をthe_content();に変更すれば完了です。

<!-- index.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(); ?>	

今回使ったテンプレートタグは

the_content();
→本文全文を取得する

せば!

-サイト構築

執筆者:


comment

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

関連記事

no image

bootstrap vol.02

bootstrapでフォームのスタイリングをする 前回に引き続き、bootstrapについてです。 今回はフォームやボタンなどbootstrapを使ったスタイリングについて書いていきます。 フォームを …

no image

タイマー処理

タイマー処理 JSにはタイマー処理という命令が用意されています。 setInterval: 一定時間ごとにある処理を繰り返すという setTimeout: 一定時間後にある処理を一回だけする setI …

no image

【Javascript】真偽値・switch構文

今日も苦手なJSについて調べたことをまとめていきます。 真偽値 if文みたいな比較演算子を使わなくても値自体で真偽値を判定ことができるようです。 データ型に応じて真になる条件と偽になる条件が違うので紹 …

no image

CSS応用編 vol.02

CSSで吹き出しをつくる 前回こちらの記事で三角形をを作る方法をみていきました。 今日はその三角形を使って吹き出しを作っていく方法をみていきます。 ベタ塗りの吹き出しをつくる 吹き出しは四角形と三角形 …

no image

配列

Javascriptの配列 今までにでてきた変数は1つのデータしかいれることができません。 1変数につき1データです。 でも例えば類似した分類で変数を指定したいとき、いくつも指定するのは面倒だったりし …