忍者ブログ

[PR]

×

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

記事の表示

05.jpg

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

01. 記事のタイトルの表示
・記述
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php endwhile; endif; ?>
・出力
<h2>10たいとる10</h2>
<h2>09タイトル</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">10たいとる10</a></h2>
<h2><a href="http://ranka.sub.jp/taroumatsu/?p=22">09タイトル</a></h2>
 (略)
<h2><a href="http://ranka.sub.jp/taroumatsu/?p=4">テスト投稿</a></h2>

06.jpg


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

<?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回]

PR

ヘッダ部の装飾

ヘッダ部の装飾を行います。
編集するファイルは、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を出力します。

04.jpg

---- 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回]

ヘッダ部の作成

ヘッダ部を作成します。(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)

02.jpg

---- 今回の記述 ----
<!-- ヘッダー -->
<div id="header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>



拍手[0回]

00.jpg


テーマの編集を行うので、
 外観 > テーマ編集
と進みます。
編集するテーマは以前作成した「Sample Theme」です。
画面右側に表示されている「index.php」を選択し、
Webページの基本的な部分を記述します。

01. DTDの記述
DTDは私の手持ちの参考書が、DTD XHTML 1.0 Transitionalなので、
同じDTDで作成します。

02. コンテンツタイプ、文字コード
head要素内に下記を記述します。
・記述
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo ('charset'); ?>" />
・出力
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

<?php bloginfo('html_type'); ?>は、text/htmlと出力され、
<?php bloginfo('charset'); ?>は、UTF-8と出力されます。

文字コードは、下記で設定した値が出力されます。
  設定 > 表示設定 > ページとフィードの文字コード

03. タイトル
title要素を追加します。
・記述
  <title><?php bloginfo('name'); ?></title>
・出力
  <title>太郎松の備忘録</title>

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

-- 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>

</head>
<body>

</body>
</html>

拍手[0回]

テーマを作成する手順

テーマとは、WordPressが作成するブログのデザインのことです。
別に自分で作らなくても
 http://wordpress.org/extend/themes/
とかで、フリーであったりします。

01. テーマ用のディレクトリを作成する。
   ディレクトリの名前は任意ですが、
   とりあえずここでは、sample とします。

02. トップページ用のテンプレート(index.php)を作成
   ファイル名は必ず、index.php です。
   中身は空でOK。

03. CSS(style.css)を用意する
   ファイル名は必ず、style.css です。
   中身の最初には、テーマに関する情報を記述します。
   
項目名 内容
Theme Name テーマ名(必須)
Theme URI テーマのURI
Description 説明
Version バージョン
Author 著作者
Author URI 著作者のURI
Tags テーマのタギング


    例としてはこんな感じ。
    @charset "utf-8";
    /*
    Theme Name: Sample Theme
    Theme URI: http://www.www.www/
    Description: This is my sample theme.
    */

03. サムネイル画像を作成する。
   画像フォーマットは、PNG、JPEG、GIFのいずれか。
   ファイル名は、screenshotで、
   拡張子は、.png、.jpg、.gif となります。
   例:screenshot.jpg

04. 上記で作ったものをアップロードする
   下記の場所にアップロードします。

    wp/  ← WordPressをインストールしたフォルダ
    │
    └ wp-content/
      │
      └ themes/  ← この直下にアップロード
        │
        └ sample/
          │
          ├ index.php
          ├ screenshot.jpg
          └ style.css

05. 管理画面で確認
   管理画面 > 外観 > テーマ より確認できます。
   左下のサムネイルが今回アップロードしたテーマです。
   13.jpg


06. テーマの編集
   テーマを有効化することで、
   外観 > テーマ編集 より編集が可能となります。
   14.jpg

      
   

拍手[0回]

プロフィール

HN:
太郎松
性別:
男性
職業:
無職
自己紹介:
フロントエンドエンジニアを目指す30代。元SE。今はHTMLコーダーってところ。あわよくばWebデザインもやりたいと考えている。

 

 

カレンダー

04 2025/05 06
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

 

最新記事

 

最新コメント

[04/14 ちーた]
[02/20 ちーたん]
[12/31 ちーたん]
[12/09 ちーたん]
[11/11 ちーたん]

 

バーコード

 

最新TB