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

～～

WordPressで企業サイトを

作ってみる Vol.02

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

12年11月21日水曜日

自己紹介名前

所属

職種

tw

FB

Blog

Mail

藤田　無憂

Web制作ユニットCherryPie

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

@anticyborg

muyuu

http://stackstock.net/

[email protected]


http://stackstock.net

http://stackstock.net

mailto:[email protected]

mailto:[email protected]

今日のお話12年11月21日水曜日

今日のお話

•WordPressで作る際のポイント

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

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

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


ありがちで良い！

まずは作ってみれ！

話はそれからだ！


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


完成イメージ


ありがちポイント！！


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


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


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


完成イメージ

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


大体こんな感じじゃ

ないでしょうか


さて、


このサイトですが、


一般的なブログの

レイアウトとは

ずいぶん違いますね


一般的な


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


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


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


一般的なブログ



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



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


一般的なブログ最新記事一覧カテゴリー一覧月別一覧固定ページ一覧

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


全然違うねー

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


WordPressで作る際のポイント

•サイトの構成を考える

•その構成を満たす仕様を考える

•各ページの構成を考える







•その構成を満たす仕様を考える運営のしやすさを念頭に

投稿の種類を決定！！







共通部分、出し分け部分を踏まえ、

WordPressの機能を遺憾なく発揮！


そうやって

作りましょうね


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


ありがちなサイトマップ



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/


http://biz.yuru-fuwa.com

http://biz.yuru-fuwa.com

http://biz.yuru-fuwa.com/service/


http://biz.yuru-fuwa.com/service/product/

http://biz.yuru-fuwa.com/service/product/

http://biz.yuru-fuwa.com/service/lecture/

http://biz.yuru-fuwa.com/service/lecture/

http://biz.yuru-fuwa.com/company/


http://biz.yuru-fuwa.com/company/history/

http://biz.yuru-fuwa.com/company/history/

http://biz.yuru-fuwa.com/company/access/

http://biz.yuru-fuwa.com/company/access/

http://biz.yuru-fuwa.com/company/message/

http://biz.yuru-fuwa.com/company/message/

http://biz.yuru-fuwa.com/news

http://biz.yuru-fuwa.com/news

http://biz.yuru-fuwa.com/news/post-name/

http://biz.yuru-fuwa.com/news/post-name/

http://biz.yuru-fuwa.com/press/

http://biz.yuru-fuwa.com/press/

http://biz.yuru-fuwa.com/press/post-name/

http://biz.yuru-fuwa.com/press/post-name/

http://biz.yuru-fuwa.com/inquiry/


http://biz.yuru-fuwa.com/blog/


http://biz.yuru-fuwa.com/recruit/


http://biz.yuru-fuwa.com/sitemap/


まずは管理画面から

コンテンツの投下


固定ページの投稿


固定ページの投稿

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


固定ページのURL

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

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


固定ページの階層化

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

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


カテゴリーを追加

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

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

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

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


準備完了(/'□')/


次！！

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


普通にマークアップした

htmlファイルに

WordPressの関数を

追加していきます12年11月21日水曜日

まずは

ファイルの分割


index.html

header.php index.php footer.phpsidebar.php

style.css

ファイルを分割


ファイル分割について

•本来WordPressはindex.phpと

style.cssがあればテーマとして動作する

•通例はheader と footer と sidebar

•独自に関数を使う場合は functions.php


ファイルの分割

•header.php → サイトヘッダーくらい

• sidebar.php → サイドナビ部分

• footer.php → フッター以降


header.php index.php footer.phpsidebar.php

style.css

ファイルを分割functions.php


header.phphtmlの最初からこの部

分までを表示します


<!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部分

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>

ヘッダー部分

←ロゴ部分






http://biz.yuru-fuwa.com/






http://biz.yuru-fuwa.com/category/news/






<header id="siteHeader"> <div class="logo"> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></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>


ヘッダー部分




















ヘッダー部分

↑サイトのURLを表示する




















ヘッダー部分

↑サイト名を表示する




















ヘッダー部分

↓ユーティリティリンク














ヘッダー部分<header id="siteHeader"> <div class="logo"> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></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>


↓グローバルナビ






至って普通やんかー


ですよねー

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


なので、1点だけ

工夫しましょうか


ちょっと一工夫

これっ！！

今どのページにいるか、俗に言う

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



今どのページにいるか、俗に言う

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

これっ！！

li に class=‘current’ を追加

cssに .current を記述


<nav id="globalNav"> <ul> <li><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>


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


<nav id="globalNav"> <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>


こんなんを追加しました





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

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





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

もしID56の固定ページかその子ページだったら、

class=”current”を表示します





<li<?php if(in_category(‘news’)){?> class="current"<?php } ?>>

もしカテゴリーが「news」だったら、



ん？


in_page();

とかなくね？



•特定の固定ページ(会社概要)である

•もしくはその子ページである





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





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

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


functions.phpに

足しちゃえ☆


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

// 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() 関数の作成

引数にページIDかスラッグを

入れると、

・そのページである

・そのページの子ページである

この条件に当てはまるか否かの

条件分岐が使えますよ


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

// 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() 関数の作成

引数にページIDかスラッグを

入れると、

・そのページである

・そのページの子ページである

この条件に当てはまるか否かの

条件分岐が使えますよ

functions.phpに

足しましょう


次っ！！

メインビジュアル！


メインビジュアル

これっ！！

大事よね！！


メインビジュアルの役割

•一番推したい商品を掲載

•多分複数掲載したい

•多分更新頻度高い


結構重要


なので、

ここはプラグインで

効果的な運用を！！


つまり、


つまり、

次回！！


つまり、

次回！！

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


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

チを使えば割と良い感じに管理できるんだけど今回は正直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とする } }}

ホームと管理画面には必要

ないから条件分岐を


// パンくずリストを表示するよーfunction breadcrumb ( ) { if(!is_home()&&!is_admin()){




ベースとなるタグ

<nav> と <ul> を作成






トップページへのリンクを作成






2階層目以降のリンクはページ

の種類によって表示内容を変更



•個別記事だったらカテゴリーが上位階層

•沿革だったら会社概要が上位階層

•制作事業だったら事業概要が上位階層

例えばこんな感じ


…えーっと、


スライドでの説明

ムツカシス( ´△｀)


パンくずリストみんな大好き

WebDesignRecipesさんが

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

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

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

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


ごめんっ！


次っ！！

下階層の画像！！


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

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

画像を表示させますよ。

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

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

んでしょうね


考え方

•画像を必要分用意して画像フォルダに置く

•今いるページに表示させたい画像を指定

•ページ毎に表示する画像のパスを変更


画像の用意

bnr-header-blog.jpg

bnr-header-company.jpg

bnr-header-news.jpg

bnr-header-inquiry.jpg

bnr-header-press.jpg

bnr-header-service.jpg

bnr-header-sitemap.jpg

bnr-header-recruit.jpg


画像の用意

bnr-header-blog.jpg

bnr-header-company.jpg

bnr-header-news.jpg

bnr-header-inquiry.jpg

bnr-header-press.jpg

bnr-header-service.jpg

bnr-header-sitemap.jpg

bnr-header-recruit.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();}


同様に、今いるページを判

定して、適用させたい画像

のタイトルを記憶させる関

数を作成


下層ページの画像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

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


次っ！！

右メニュー


右側のメニュー

この部分！！


考え方

•共通して全ページで表示するものがある

•会社概要ではローカルナビ表示

•事業概要でもローカルナビを表示

•ニュースは年別一覧のリンクを表示


やること

•ウィジェット使用の記述を追加

•管理画面でカスタムメニューの追加

•カスタムメニューをウィジェットに登録


// ウィジェットを利用する$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' => '会社概要サイドバー',


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


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

ウィジェット使用の記述を追加functions.phpにこれを

記述して、ウィジェットを

複数作成します









ウィジェット使用の記述を追加

各ウィジェットの情報

を記述します










これは共通で表示する

ウィジェット










これは会社概要で表示

するウィジェット










これは事業概要で表示

するウィジェット










さっき設定した複数のウィ

ジェットをここで作成！12年11月21日水曜日

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

ちなみに

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

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

// 複数のウィジェットの作成if ( function_exists('register_sidebar') ) { register_sidebar($args1); register_sidebar($args2);}


管理画面に表示

ほら見てほらっ！！

できたっ(/'□')/12年11月21日水曜日

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

1. 名前を入力



2.「メニューを保存」



3.ページを選択



4.「メニューに追加」



5.「メニューを保存」


管理画面に項目を追加

こいつを



ドラッグ！



「会社概要」を選択


<ul class=""><?php// ---------------------------------------// 分岐の条件// 会社概要系 ! サイドバー2// 事業概要系 ! サイドバー3// ニュースプレス ! 年別アーカイブ+サイドバー1

// 共通 ! サイドバー1// ---------------------------------------if ( in_page(4) ) { if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) { }} else if ( in_page(56) ) { if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(3) ) { }} 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>

sidebar.phpに記述いつものようにページの

条件分岐で表示するウィ

ジェットを出し分けます




sidebar.phpに記述会社概要だったら

サイドバー2




sidebar.phpに記述事業概要だったら

サイドバー3




sidebar.phpに記述ニュースかプレスリリース

だったら




sidebar.phpに記述年別アーカイブリンクを表示




sidebar.phpに記述最後に、共通で表示する

サイドバーを記述


次っ！！

やっと本番(?)！

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


作ったファイル

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

トップページ



トップページ

■条件の指定

「news」カテゴリー

の記事を6件取得



トップページ

条件の記事を取得



トップページ

取得した記事をいつもの

ように繰り返して表示



トップページ

別途記事を取得した場合は

リセット処理も忘れずに


固定ページ(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> 

コンテンツ部分でやること

投稿を繰り返して表示する！






ここから







ここまでを繰り返します


カテゴリー一覧ページ

(category.php)


カテゴリー一覧

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




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




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




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

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


footer.php

この部分12年11月21日水曜日

特記すべき

項目なし！！


強いて言うと、


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


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

wp_header(); と一緒です。


できたっ(/'□')/


さいごに


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

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

デモを作成しました


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

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

んど独自で実装してます


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

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

もしれないっすー


でも大丈夫です。

WordPressは質問したら

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

いし、勉強会も多いです


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

積極的に質問する


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

きます、きっと、多分。


僕もWordPressで制作をし

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


優しい先輩WPerに支えられ

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


みなさんも、今後

WordPressで制作をやって

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

あれば、


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

てみては如何でしょうか


WordBench

http://wordbench.org/12年11月21日水曜日

http://wordbench.org/

http://wordbench.org/

がんばっていこーぜ

(/'□')/


あ（りがとうございま）した！！


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

Self Improvement