30代は創造する

[PR]

posted at:2025-05-06
written by:

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

記事の投稿日時とカテゴリの表示

posted at:2012-03-11
written by:太郎松

上の画像のように、記事の投稿日時とカテゴリを表示します。

01.日付の表示
投稿日付を表示します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?>
</p>
・出力
<p class="postinfo">
2012年3月10日</p>

<?php echo get_the_date(); ?>は、日付を出力します。
日付のフォーマットは、下記で設定したものが繁栄されます。
設定＞一般＞日付のフォーマット

02. 時刻の表示
日時の後に時を追加します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
</p>
・出力
<p class="postinfo">
2012年3月10日 12:16</p>

<?php the_time(); ?>は、時刻を出力します。
時刻のフォーマットは、下記で設定したものが繁栄されます。
設定＞一般＞時刻フォーマット

03. カテゴリの表示
記事のカテゴリを表示します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
|
カテゴリー：<?php the_category(); ?>
</p>
・出力
<p class="postinfo">
2012年3月10日 12:16 |
カテゴリー：<ul class="post-categories">
<li><a href="http://ranka.sub.jp/taroumatsu/?cat=3" title="(X)HTML の投稿をすべて表示" rel="category">(X)HTML</a></li>
<li><a href="http://ranka.sub.jp/taroumatsu/?cat=4" title="CSS の投稿をすべて表示" rel="category">CSS</a></li></ul></p>

<?php the_category(); ?>は、記事のカテゴリをリスト（ul要素）で出力します。
カンマ区切りで出力させたい場合は、下記のように記述します。
・記述
<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
|
カテゴリー：<?php the_category(','); ?>
</p>
・出力

04.装飾
記事の投稿日時、カテゴリを装飾します。（style.css）

p.postinfo {color: #0c8bcd;
text-align: right;
margin: 20px 0 0;
clear: both}

p.postinfo a {color: #0c8bcd}

[0回]

記事の装飾

posted at:2012-03-11
written by:太郎松

style.cssを編集し、上記のように装飾します。

01. 各記事を枠で囲む
/* 記事 */
div.post {
border: solid 1px #0c8bcd;
padding: 15px;
margin-bottom: 20px;
}

02. タイトルのデザインを指定する
div.post h2 {
background-color: #a3d2f2;
font-size: 0.875em;
padding: 10px;
margin: 0;
}div.post h2 a {
text-decoration: none;
color: #000000;
}

03. 記事本文のデザインを指定する
div.post p {
font-size: 0.875em;
line-height: 1.6;
margin-top: 10px;
}

04. 全体の横幅を指定
/* コンテナ */
div#container {
width: 760px;
margin: auto;
}

[0回]

記事の表示

posted at:2012-03-11
written by:太郎松

記事のタイトル、本文を表示します。

01. 記事のタイトルの表示
・記述
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; endif; ?>
・出力
<h2>１０たいとる１０</h2>
<h2>０９タイトル</h2>
　（略）
<h2>テスト投稿</h2>

出力できる記事があった場合、設定した件数分ループし、
記事のタイトルを出力すると言う記述です。
ループするたびに、2行目のh2要素が出力されます。
<?php the_title(); ?>は、記事のタイトルを出力します。

設定した件数とは、下記で設定した値です。
設定＞表示設定＞ 1ページに表示する最大投稿数

02. 個別ページへのリンクを作成
h2要素内の記事のタイトルをa要素で囲み、個別ページへのリンクを作成します。
・記述
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
・出力
<h2><a href="http://ranka.sub.jp/taroumatsu/?p=25">１０たいとる１０</a></h2>
<h2><a href="http://ranka.sub.jp/taroumatsu/?p=22">０９タイトル</a></h2>
　（略）
<h2><a href="http://ranka.sub.jp/taroumatsu/?p=4">テスト投稿</a></h2>

<?php the_permalink(); ?>は、個別ページのURLを出力します。
03. 記事本文の表示
記事の本文を表示します。記事のタイトル(h2要素)の次の行に下記記述を追加します。
・記述
<?php the_content(); ?>
・出力

<?php the_content(); ?>は、記事の本文を出力します。

04. div要素の記述
div要素を用い、記事タイトルと本文などをグループ化します。

-- index.php --

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />

</head>
<body>

<div id="container">

<div id="header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>

<div id="content">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<div class="post">
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
</div>
<?php endwhile; endif; ?>
</div>

</div>

</body>
</html>

[0回]

ヘッダ部の装飾

posted at:2012-03-11
written by:太郎松

ヘッダ部の装飾を行います。
編集するファイルは、style.cssです。
style.cssの編集は、WordPress特有の書き方があるわけではないので、説明は省きます。

style.cssを読み込ませるために、
index.phpのhead要素内にlink要素を記述します。
・記述
<link rel="stylesheet" href="<?php bloginfo ('stylesheet_url'); ?>" type="text/css" />
・出力
<link rel="stylesheet" href="http://ranka.sub.jp/taroumatsu/wp-content/themes/sample/style.css" type="text/css" />

<?php bloginfo ('stylesheet_url'); ?>"は、style.cssのURLを出力します。

---- style.css -----
@charset "utf-8";
/*
Theme Name: Sample Theme
Theme URI: http://www.www.www/
Description: This is my sample theme.
*/

/* ヘッダー */
div#header h1 {
font-size: 1.875em;
margin: 0;
}

div#header h1 a {
text-decoration: none;
color: #000000;
}

div#header p#desc {
font-size: 0.75em;
color: #444444;
margin: 0;
}

div#header {
border-bottom: solid 5px #a3d2f2;
padding-bottom: 10px;
margin-bottom: 20px;
}

[0回]

ヘッダ部の作成

posted at:2012-03-11
written by:太郎松

ヘッダ部を作成します。（head要素のことではありません。）

01. div要素の記述
ヘッダ部のdiv要素でbody要素内に記述します。
・記述

<div id="header">
</div>

02. ブログ名
ヘッダ内にタイトルを記述します。
・記述
<h1><?php bloginfo('name'); ?></h1>
・出力
<h1>太郎松の備忘録</h1>

<?php bloginfo('name'); ?>は、下記で設定した値が出力されます。
設定＞一般＞サイトのタイトル

03. ブログの説明
タイトルの下に、ブログの説明を記述します。
・記述
<p id="desc"><?php bloginfo('description'); ?></p>
・出力
<p id="desc">Just another WordPress site</p>

<?php bloginfo('description'); ?>は、下記で設定した値が出力されます。
設定＞一般＞キャッチフレーズ

04. トップページへのリンクを作成
タイトルの文字をリンクにし、押下時にトップページへ遷移するように記述します。
タイトルをa要素で囲みます。
・記述
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
・出力
<h1><a href="http://ranka.sub.jp/taroumatsu">太郎松の備忘録</a></h1>

<?php echo home_url(); ?>は、下記で設定した値が出力されます。
設定＞一般＞サイトアドレス (URL)

---- 今回の記述 ----

<div id="header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>

[0回]

<<前のページ次のページ>>

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |