WordPressで企業サイトのテーマを作る

WordPressで企業サイトを

作ってみる Vol.02

∼ 作ったサイトを ∼
オリジナルテーマ化する

12年11月21日水曜日

自己紹介
名前藤田無憂

所属 Web制作ユニットCherryPie

職種ディレクター・エンジニア

tw @anticyborg

FB muyuu

Blog http://stackstock.net/

Mail anticyborg@gmail.com


今日のお話

今日のお話

• WordPressで作る際のポイント

• ありがちな企業サイトのページ構成
• ありがちな企業サイトの画面構成

• ありがちな企業サイトの実装

ありがちで良い！

まずは作ってみれ！

話はそれからだ！


ありがちな企業サイトを作ろう


完成イメージ


ありがちポイント！！


完成イメージ
情緒あふれる
グローバルナビ


完成イメージ
さりげない
ユーティリティリンク


完成イメージ
惜しみなくあたえる
メインビジュアル
(※企業のメイン商
材を上手にアピール
できるメインビジュ
アル)


完成イメージ
サイドナビゲーショ
ンにはプッシュした
いコンテンツをまと
めて管理


大体こんな感じじゃ

ないでしょうか


さて、


このサイトですが、


一般的なブログの

レイアウトとは

ずいぶん違いますね


一般的な


一般的なブログのレイアウト


一般的なブログのレイアウトとは


一般的なブログのレイアウトとはなんぞや


一般的なブログ


グローバルナビ？
なにそれ美味しいの？


書いた記事が最新から
何件か表示されてる


最新記事一覧
カテゴリー一覧
月別一覧
固定ページ一覧

とにかく一覧
(/'□')/


全然違うねー

(★´∀｀)人(´∀｀★)ﾈｪｰ


WordPressで作る際のポイント

• サイトの構成を考える

• その構成を満たす仕様を考える
• 各ページの構成を考える



• サイトの構成を考える

頭に
すさを念
しや
運営の
類を決定！！
投稿の種



• サイトの構成を考えるを踏まえ、
分け部分
、出しく発揮！
共通部分を遺憾な
• rdPressの機能
その構成を満たす仕様を考える
Wo


そうやって

作りましょうね


ありがちな企業サイトのページ構成


ありがちなサイトマップ



index.php



固定ページ



投稿記事



カテゴリー

「ニュース」



カテゴリー

「プレスリリース」



全部固定ページ

(/'□')/


ほとんど固定ページ

じゃねーかΣ（ﾟдﾟlll）


はい


文句ある？


だって企業サイトって


一度作ったら

変えないページ

多いでしょ？


投稿記事を使うケース

• 新着情報などのドンドン情報が増える箇所
• 製品情報などドンドン情報が更新する箇所
• 社員ブログなど


投稿記事を使わない方が良いケース

• 会社情報など、あまり追加が発生しない箇所
• 単一のページ


企業サイトはその目的上、

ほぼ固定ページで済ませら

れるケースが多い


なので


そこっ！！

「えー、WordPressなのに

記事投稿使わないの？」とか

言わない！！


ありがちな企業サイトの画面構成


ありがちなページ構成 TOPページ
ロゴその他ページ

グローバルナビゲーション

商品を紹介する
かっちょいいメインビジュアル

製品
新着情報
バナー
製品
バナー
プレスリリース

フッター


ロゴその他ページ • ロゴ
• グローバルナビゲーション

商品を紹介する • メインビジュアル

かっちょいいメインビジュアル • 新着情報を10件表示

• プレスリリースもね
製品
新着情報
バナー
• サイドナビには特集とか

製品
• 上部にユーティリティ系

バナー

フッター



グローバルナビゲーション各コンテンツへスムーズかつ

商品を紹介するリズミカルなステップでアク
セス可能なエレガントなナビ

製品ゲーション
新着情報
バナー
製品
バナー

フッター



あふれんばかりの愛社精神
が乗り移ったかのような高
い訴求力を誇るトップペー
製品
新着情報
ジのビジュアル要素
バナー
製品
バナー

フッター





製品新着情報等の情報は投稿記事
新着情報
バナー
のループを表示させる
製品
バナー

フッター





製品サイドバーは
新着情報
バナー
・共通部分
製品
バナー
・特定のページにのみ表示
を分けてウィジェットで管理
フッター


ありがちなページ構成下層ページ

このページのイメージを
表示するビジュアル

タイトルローカル
ナビゲーション

製品
バナー
本文
製品
バナー

フッター


ロゴその他ページ • コンテンツ事のイメージ
• ローカルナビゲーション
表示するビジュアル • タイトル

タイトルローカル • 本文

製品
バナー
本文
製品
バナー

フッター



このページのイメージをコンテンツによって画像
を出し分けます

製品
バナー
本文
製品
バナー

フッター




タイトルと本文を表示させ
ます
製品
バナー
本文
製品
バナー

フッター



コンテンツ別に表示するべき
ものがある場合は表示
製品
バナー
本文
製品・会社概要
バナー
・事業概要

フッター
ローカルナビを表示


ありがちな企業サイトの実装


ありがちな企業サイトの実装目次

• URLを決める • 固定ページの投稿
• html作成 • カテゴリーの作成
• テーマ化 • ウィジェット
• メインビジュアル
• 下層イメージ

URL一覧
# 一階層二階層 URL
1 トップ http://biz.yuru-fuwa.com/
2 事業概要 http://biz.yuru-fuwa.com/service/
3 制作事業 http://biz.yuru-fuwa.com/service/product/
4 講師事業 http://biz.yuru-fuwa.com/service/lecture/
5 会社概要 http://biz.yuru-fuwa.com/company/
6 沿革 http://biz.yuru-fuwa.com/company/history/
7 アクセスマップ http://biz.yuru-fuwa.com/company/access/
8 代表挨拶 http://biz.yuru-fuwa.com/company/message/
9 ニュース http://biz.yuru-fuwa.com/news/
10 個別ページ http://biz.yuru-fuwa.com/news/post-name/
11 プレス http://biz.yuru-fuwa.com/press/
12 個別ページ http://biz.yuru-fuwa.com/press/post-name/
13 お問合せ http://biz.yuru-fuwa.com/inquiry/
14 ブログ http://biz.yuru-fuwa.com/blog/
15 採用情報 http://biz.yuru-fuwa.com/recruit/
16 サイトマップ http://biz.yuru-fuwa.com/sitemap/


まずは管理画面から

コンテンツの投下


固定ページの投稿


固定ページの投稿

事業概要、会社概要は階層化しましょう


固定ページのURL

「パーマリンク」を編集して、

お好きなURLにしましょうね


固定ページの階層化

子ページとなるページには

ここで親ページを選択しましょう


カテゴリーを追加

「名前」にはカテゴリー名

(ここでは「ニュース」と「プレスリリース」)

「スラッグ」にはURLのディレクトリ名

(ここでは「news」と「press」)


準備完了(/'□')/


次！！

html→WPテーマ(/'□')/


普通にマークアップした

htmlファイルに

WordPressの関数を

追加していきます

まずは

ファイルの分割


ファイルを分割
index.html style.css

header.php index.php sidebar.php footer.php


ファイル分割について

• 本来WordPressはindex.phpと
style.cssがあればテーマとして動作する

• 通例はheader と footer と sidebar
• 独自に関数を使う場合は functions.php


ファイルの分割

• header.php → サイトヘッダーくらい
• sidebar.php → サイドナビ部分
• footer.php → フッター以降


ファイルを分割
functions.php style.css

header.php index.php sidebar.php footer.php


header.php
htmlの最初からこの部

分までを表示します


head部分
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/add.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS Feed" href="<?php bloginfo('atom_url'); ?>" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/main.js"></script>


<?php if ( is_page('blog') ) {?>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<?php } ?>

<title><?php bloginfo('name'); ?></title>

<?php wp_head();?>
</head>

head部分

<link rel="stylesheet" href="/css/style.css" type="text/css" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" />

スタイルシートファイルの記述を変更


head部分

<script type="text/javascript" src="/js/main.js"></script>

<script type="text/javascript" src="<?php
bloginfo('template_directory'); ?>/js/main.js"></script>

スクリプトファイルの呼び出し記述を変更


head部分
<?php if ( is_page('blog') ) {?>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<?php } ?>

特定のページ(ここでは社員ブログページ)でしか

表示させない場合に追加する


head部分

<?php wp_head();?>

プラグインとかが吐き出すコードをこの関数で表示させ

ます


ヘッダー部分
まずはこの部分


ヘッダー部分
<header id="siteHeader">
<div class="logo">
<h1><a href="/">株式会社ゆるふわ</a></h1>
←ロゴ部分
</div>
<div class="other">
<div class="recruit"><a href="/recruit/"><span>採用情報</span></a></div>
<div class="sitemap"><a href="/sitemap/"><span>サイトマップ</span></a></div>
</div>
</header>

<nav id="globalNav">
<ul>
<li class="current"><a href="/"><span>HOME</span></a></li>
<li><a href="/service/"><span>事業概要</span></a></li>
<li><a href="/company/"><span>会社概要</span></a></li>
<li><a href="/news/"><span>ニュース</span></a></li>
<li><a href="/inquiry/"><span>お問合せ</span></a></li>
<li><a href="/blog/"><span>Blog</span></a></li>
</ul>
</nav>


ヘッダー部分
<div class="logo">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div>
<div class="other">
</div>
</header>

<ul>
</ul>
</nav>


ヘッダー部分
<div class="logo">
</div>
<div class="other"> ↑サイトのURLを表示する
</div>
</header>

<ul>
</ul>
</nav>


ヘッダー部分
<div class="logo">
</div>
<div class="other"> ↑サイト名を表示する
</div>
</header>

<ul>
</ul>
</nav>


ヘッダー部分
<div class="logo">
</div> ↓ユーティリティリンク
<div class="other">
</div>
</header>

<ul>
</ul>
</nav>


ヘッダー部分
<div class="logo">
</div>
<div class="other">
</div>
</header>
↓グローバルナビ
<ul>
</ul>
</nav>


至って普通やんかー


ですよねー

(★´∀｀)人(´∀｀★)ﾈｪｰ


なので、1点だけ

工夫しましょうか


ちょっと一工夫

っ！！
これ
今どのページにいるか、俗に言う

カレントの場合に変化をつけましょう



っ！！
これ
今どのページにいるか、俗に言う

カレントの場合に変化をつけましょう

li に class=‘current’ を追加

cssに .current を記述



<ul>
<li><a href="/"><span>HOME</span></a></li>
</ul>
</nav>

ここにコードを追加していきます



<ul>
<li<?php if(is_home()){?> class="current"<?php } ?>><a href="/"><span>HOME</span></a></li>
<li<?php if(in_page(56)){?> class="current"<?php } ?>><a href="/service/"><span>事業概要</span></a></li>
<li<?php if(in_page(4)){?> class="current"<?php } ?>><a href="/company/"><span>会社概要</span></a></li>
<li<?php if(in_category('news')){?> class="current"<?php } ?>><a href="/news/"><span>ニュース</span></a></li>
<li<?php if(in_page(24)){?> class="current"<?php } ?>><a href="/inquiry/"><span>お問合せ</span></a></li>
<li<?php if(is_page(12)){?> class="current"<?php } ?>><a href="/blog/"><span>Blog</span></a></li>
</ul>
</nav>

こんなんを追加しました



<ul>
</ul>
</nav>

<li<?php if(is_home()){?> class="current"<?php } ?>>

もしホームだったら、 class=”current”を表示します



<ul>
</ul>
</nav>

<li<?php if(in_page(56)){?> class="current"<?php } ?>>
もしID56の固定ページかその子ページだったら、

class=”current”を表示します



<ul>
</ul>
</nav>

<li<?php if(in_category(‘news’)){?> class="current"<?php } ?>>
もしカテゴリーが「news」だったら、



ん？


in_page();

とかなくね？



• 特定の固定ページ(会社概要)である
• もしくはその子ページである



こんな条件分岐がほしいので、



こんな条件分岐がほしいので、

独自で関数を作りましょう

functions.phpに

足しちゃえ☆


新しい関数を作成
/*
* 指定された固定ページの親子関係か否か
in_page() 関数の作成
*/
function in_page ( $val = "" ) {
    // ↓ ループの外の場合用
    global $post;
引数にページIDかスラッグを
    // IDに変換
    $pid = slug_to_id($val); 入れると、
    // ↓現在のページが固定ページだったらOK
    if ( is_page( $pid ) ) { ・そのページである
        return true;
    }
・そのページの子ページである
    // ↓現在のページの祖先ページIDを取得(配列)
    $anc = get_post_ancestors( $post -> ID );
この条件に当てはまるか否かの
    // ↓指定された$pidと正しい祖先ページIDがあればOK
    foreach ( $anc as $ancestor ) { 条件分岐が使えますよ
        if( is_page() && $ancestor == $pid ) {
            return true;
        }
    }
    return false;
}


新しい関数を作成
/*
* 指定された固定ページの親子関係か否か
in_page() 関数の作成
*/
function in_page ( $val = "" ) {
    // ↓ ループの外の場合用

functions.phpに
    global $post;
引数にページIDかスラッグを
    // IDに変換
    $pid = slug_to_id($val); 入れると、
    // ↓現在のページが固定ページだったらOK
    if ( is_page( $pid ) ) { ・そのページである
        return true;
    }
・そのページの子ページである

足しましょう
    // ↓現在のページの祖先ページIDを取得(配列)
    $anc = get_post_ancestors( $post -> ID );

    // ↓指定された$pidと正しい祖先ページIDがあればOK
この条件に当てはまるか否かの
    foreach ( $anc as $ancestor ) { 条件分岐が使えますよ
        if( is_page() && $ancestor == $pid ) {
            return true;
        }
    }
    return false;
}


次っ！！

メインビジュアル！


メインビジュアル

！！
れっ
こ！
ね！
事よ
大


メインビジュアルの役割

• 一番推したい商品を掲載
• 多分複数掲載したい
• 多分更新頻度高い


結構重要


なので、

ここはプラグインで

効果的な運用を！！


つまり、


つまり、

次回！！


つまり、

次回！！

乞うご期待(/'□')/


まぁ一応カスタム投稿タイプとカスタムフィールドとアイキャッ

チを使えば割と良い感じに管理できるんだけど今回は正直JSの

実装が間に合わなかったっていうかそうすれば良いなぁって思っ

たのもこのスライドを書いてる11月16日現在に思った事だしい

くらなんでもまだ7割くらいしかスライドできてない状況でスラ

イド作るよりサイト作る方が楽しいからって現実逃避みたいな制

作は何かいろんな人に失礼な気がするしでもせっかくだったら作

りたいなぁよしこの発表が終わったら頑張ってみようかなぁ。

あ、現段階の「こうすればできるよ」で良ければ後でいくらでも

聞いて下さいね。ゆるっとふわっと答えますよー


まぁ一応カスタム投稿タイプとカスタムフィールドとアイキャッ

チを使えば割と良い感じに管理できるんだけど今回は正直JSの

実装が間に合わなかったっていうかそうすれば良いなぁって思っ

たのもこのスライドを書いてる11月16日現在に思った事だしい

言い訳すんなっ！！
くらなんでもまだ7割くらいしかスライドできてない状況でスラ

イド作るよりサイト作る方が楽しいからって現実逃避みたいな制

(りたいなぁよしこの発表が終わったら頑張ってみようかなぁ。
‘д‘⊂彡☆))Д´) ﾊﾟｰﾝ
作は何かいろんな人に失礼な気がするしでもせっかくだったら作

あ、現段階の「こうすればできるよ」で良ければ後でいくらでも

聞いて下さいね。ゆるっとふわっと答えますよー


次っ！！

パンくずリスト



ここね！！

・現在地を表す

・ナビゲーション

色んな意味で大切な機能

ですよね


ここも関数を作成しましょうか
■header.php
<?php breadcrumb(); // パンくずの表示 ?>

会社概要近辺なら今のページに合わせた

リンクを表示します
ニュース近辺なら

事業概要近辺なら


// パンくずリストを表示するよー
function breadcrumb ( ) {
ホームと管理画面には必要
if(!is_home()&&!is_admin()){

  $str =''; ないから条件分岐を
  $li = '<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
  $span = '<span itemprop="title">';
   // ホーム、管理ページ以外に nav と ul でパンくずを作成
   $str.= '<nav class="breadCrumb">'."n";
  $str.= '<ul>'."n";

// 第一階層ホームのli作成
$str.= $li.'<a href="'. home_url() .'/" itemprop="url">'.$span.'HOME</span></a></li>'."n";

   // 404の場合は「404」のみ
    if(is_404()){
      $str.='<li>そんなページはございませんことよ</li>'."n";
} elseif(is_category()) {
// カテゴリーアーカイブの場合はカテゴリー名をliで区切る
} elseif(is_page()){
// 固定ページの場合は階層に従って liを生成
} elseif(is_single()){
// 個別ページの場合はカテゴリーをliとする
}
}
}


ベースとなるタグ
  $str ='';
<nav> と <ul> を作成
  $str.= '<ul>'."n";


   // 404の場合は「404」のみ
    if(is_404()){
}
}
}


トップページへのリンクを作成
  $str ='';
  $str.= '<ul>'."n";


   // 404の場合は「404」のみ
    if(is_404()){
}
}
}


2階層目以降のリンクはページ
  $str ='';
の種類によって表示内容を変更
  $str.= '<ul>'."n";


   // 404の場合は「404」のみ
    if(is_404()){
}
}
}



• 個別記事だったらカテゴリーが上位階層
• 沿革だったら会社概要が上位階層
• 制作事業だったら事業概要が上位階層
例えばこんな感じ


…えーっと、


スライドでの説明

ムツカシス( ´△｀)


みんな大好き

WebDesignRecipesさんが

すげー詳しく解説されてます

パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるか

もしれない（コード付き）

http://webdesignrecipes.com/wordpress-breadcrumb-list-tips/


ごめんっ！


次っ！！

下階層の画像！！


下層ページの画像
ここね！！

一応、コンテンツ毎に違う

画像を表示させますよ。

本来であれば「事業概要ぽ

い画像」とかにすれば良い

んでしょうね


考え方

• 画像を必要分用意して画像フォルダに置く
• 今いるページに表示させたい画像を指定
• ページ毎に表示する画像のパスを変更


画像の用意

bnr-header-blog.jpg bnr-header-press.jpg

bnr-header-company.jpg bnr-header-service.jpg

bnr-header-inquiry.jpg bnr-header-recruit.jpg

bnr-header-news.jpg bnr-header-sitemap.jpg


画像の用意

ファイル名は
bnr-header-blog.jpg bnr-header-press.jpg

そこだけ違うように
bnr-header-company.jpg bnr-header-service.jpg

しましょうね
bnr-header-inquiry.jpg bnr-header-recruit.jpg

bnr-header-news.jpg bnr-header-sitemap.jpg


関数の作成
function get_header_img () {
  if ( in_page("company") ) { グローバルナビゲーション
    $text = "company"; // 会社概要ページ系

同様に、今いるページを判
  } else if ( in_page("service") ) {
    $text = "service"; // 事業概要ページ系
  } else if ( in_category( 'news' ) ){
    $text = "news"; // ニュース系
  } else if ( in_category( 'press' ) ) { 定して、適用させたい画像
    $text = "press"; // プレス系
  } else if ( in_page("inquiry") ) {
    $text = "inquiry"; // お問い合わせ系のタイトルを記憶させる関
  } else if ( in_page("blog") ) {
// ブログ系
数を作成
    $text = "blog";
  } else if ( in_page("recruit") ) {
    $text = "recruit"; // 採用情報系
  } else if ( in_page("sitemap") ) {
    $text = "sitemap"; // サイトマップ系
  } else {
    return false;
  }
  return $text;
}

function header_img() {
  echo get_header_img();
}


■header.php
<?php if ( get_header_img() ) {?>
<img src="<?php bloginfo('template_directory');?>/img/bnr-header-<?php header_img();?>.jpg" />
<?php } ?>

if ( get_header_img() ) {

↑ さっき作った関数でタイトルが何か書かれて

いる場合は画像を表示する


■header.php
<?php if ( get_header_img() ) {?>
<img src="<?php bloginfo('template_directory');?>/img/bnr-header-<?php header_img();?>.jpg" />
<?php } ?>

bnr-header-<?php header_img();?>.jpg

↑ 画像の表示箇所に文字を追加します


次っ！！

右メニュー


右側のメニュー

この部分！！


考え方

• 共通して全ページで表示するものがある
• 会社概要ではローカルナビ表示
• 事業概要でもローカルナビを表示
• ニュースは年別一覧のリンクを表示


やること

• ウィジェット使用の記述を追加
• 管理画面でカスタムメニューの追加
• カスタムメニューをウィジェットに登録


ウィジェット使用の記述を追加
functions.phpにこれを
// ウィジェットを利用する
$args1 = array(
        'name' => '共通サイドバー',
        'id' => 'sidebar-1',
        'description'
        'before_widget'
=>
=>
'',
'<li id="%1$s" class="widget %2$s">',
記述して、ウィジェットを
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>' );
複数作成します
$args2 = array(
        'name' => '会社概要サイドバー',
        'description' => '',
        'before_widget' => '<li id="%1$s" class="widget %2$s">',

$args3 = array(
        'name' => '事業概要サイドバー',

if ( function_exists('register_sidebar') ) {
    register_sidebar($args1);
}


$args1 = array(
        'name' => '共通サイドバー', 各ウィジェットの情報

を記述します

$args2 = array(

$args3 = array(

}



これは共通で表示する
$args1 = array(
        'before_widget'
        'after_widget'
=>
=>
'</li>', ウィジェット

$args2 = array(

$args3 = array(

}


$args1 = array(

これは会社概要で表示
$args2 = array(
        'before_widget'
        'after_widget'
=>
=>
'</li>', するウィジェット

$args3 = array(

}


$args1 = array(

$args2 = array(

$args3 = array(
        'name' => '事業概要サイドバー', これは事業概要で表示
        'before_widget'
        'after_widget'
=>
=>
'</li>', するウィジェット

}


$args1 = array(

$args2 = array(

$args3 = array(

    register_sidebar($args1); さっき設定した複数のウィ

ジェットをここで作成！
}


ちなみに
// ウィジェットの作成
if ( function_exist('register_sidebar') ) {
    register_sidebar();
}

// 複数のウィジェットの作成
}

ウィジェットを作成する場合、一つ作成する時と複数

作成する時で表記が違います


管理画面に表示

ほら見てほらっ！！

できたっ(/'□')/

カスタムメニューを作る
「外観→メニュー」でカスタムメニューを作ります

1. 名前を入力



2.「メニューを保存」



3.ページを選択



4.「メニューに追加」



5.「メニューを保存」


管理画面に項目を追加

こいつを



ドラッグ！



「会社概要」を選択


sidebar.phpに記述
    <ul class="">
<?php いつものようにページの
// ---------------------------------------
// 分岐の条件
// 会社概要系 ! サイドバー2 条件分岐で表示するウィ
// 事業概要系 ! サイドバー3
// ニュースプレス ! 年別アーカイブ+サイドバー1
ジェットを出し分けます
// 共通 ! サイドバー1
// ---------------------------------------
if ( in_page(4) ) {
  if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) { }
} else if ( in_page(56) ) {
} else if ( in_category(3) || in_category(4) ) {
  if ( !is_home() ) { ?>
<li>
<ul class="year-archive">
<?php wp_get_archives('type=yearly&after=年');?>
</ul>
</li>
<?php }
}
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) { }
?>
</ul>


次っ！！

やっと本番(?)！

コンテンツ部分(/'□')/


作ったファイル

• index.php
• single.php
• page.php
• archive.php
• category.php

トップページ

(index.php)


トップページ

このサイトでは、一般的なブログのトップページに

表示する「投稿記事を最新から∼件表示」という内

容を表示したい訳ではない


トップページ

このサイトでは、一般的なブログのトップページに

表示する「投稿記事を最新から∼件表示」という内

容を表示したい訳ではない

ほしい記事の内容を指定して取得・表示


トップページ

この2種類の記事を
取得します


トップページ
      <ul>
<?php
$args = array(
  'category_name' => 'news', // カテゴリを指定
  'posts_per_page' => 6, // 表示するページ数
);
$my_query = new WP_Query( $args );
?>
<?php while ( $my_query->have_posts() ) : $my_query->the_post(); ?>
<li><a href="<?php the_permalink();?>">
<time datetime="<?php the_time('Y-m-d');?>"><?php the_time('Y
年Md日');?></time><?php the_title();?>
</a></li>
<?php endwhile; // ループ終了 ?>
<?php wp_reset_postdata(); // ループのリセット ?>
      </ul>


トップページ
      <ul>
<?php ■条件の指定
$args = array(
「news」カテゴリー
);
の記事を6件取得
?>
</a></li>
      </ul>


トップページ
      <ul>
<?php
$args = array(
);
?> 条件の記事を取得
</a></li>
      </ul>


トップページ
      <ul>
<?php
$args = array(
  'posts_per_page' => 6, // 表示するページ数取得した記事をいつもの
);
?> ように繰り返して表示
</a></li>
      </ul>


トップページ
      <ul>
<?php
$args = array(
);
?>
</a></li>
      </ul>
別途記事を取得した場合は

リセット処理も忘れずに

固定ページ(single.php)

記事投稿ページ(page.php)


コンテンツ部分でやること
投稿を繰り返して表示する！

<div id="contents">

<?php while (have_posts()) : the_post(); ?>
<article class="post">
<header>
<h1 class="page-title"><?php the_title(); ?></h1>
</header>
<?php the_content(); ?>
</article>
<?php endwhile;?>

</div>

<div id="contents">

<header>
</header>
</article>
<?php endwhile;?> ここまでを繰り返します
</div>


カテゴリー一覧ページ

(category.php)


カテゴリー一覧

ニュース、プレスリリースの一覧ページで使用


<ul>
<li>
</a>
</li>
<?php endwhile;?>
</ul>

同じように、繰り返したい箇所に同じ記述を書く


<ul>
<li>
</a>
</li>
<?php endwhile;?>
</ul>

・タイトルがアンカーリンク


<ul>
<li>
</a>
</li>
<?php endwhile;?>
</ul>

・タイトルがアンカーリンク

・パーマリンクがリンク先URL


footer.php

この部分

特記すべき

項目なし！！


強いて言うと、


<?php wp_footer();?>
</body>
</html>

これだけ入れましょうね。

wp_header(); と一緒です。


できたっ(/'□')/


さいごに


今回、できる限り簡易に、

かつ運用が楽になるように

デモを作成しました


しかも、プラグインに関す

る内容は次回なので、ほと

んど独自で実装してます


なので、もしかしたら難しい

と感じられる箇所もあったか

もしれないっすー


でも大丈夫です。

WordPressは質問したら

答えてくれる強い味方が多

いし、勉強会も多いです


真摯に、積極的に制作して

積極的に質問する


それだけで理解が深まってい

きます、きっと、多分。


僕もWordPressで制作をし

出してから、まだ1年です。


優しい先輩WPerに支えられ

てここまでやってこれました


みなさんも、今後

WordPressで制作をやって

いこうと考えられているので

あれば、


コミュニティへの参加を考え

てみては如何でしょうか


WordBench

http://wordbench.org/

がんばっていこーぜ

(/'□')/


WordPressで企業サイトのテーマを作る

WordPressで企業サイトのテーマを作る

Recommended

Recommended

More Related Content

More from Muyuu Fujita

More from Muyuu Fujita (14)

WordPressで企業サイトのテーマを作る