デザイナーが本当に欲しかったオリジナルなテーマつくっちゃいました！解説とテーマお持ち帰り

ながとみちはる

デザイナーが本当に欲しかったオリジナルなテーマつくっちゃいました！

解説とテーマお持ち帰り

制作協力者：石田　美穂　・森光加奈子

2012年11月6日火曜日

配布テーマとスライドの修正のご報告

11月3日にセッションでお話しさせていただきました、スライドと

配布用テーマについて、よりCodexに準拠した内容にするほうがい

いのではと提案をいただき、テーマ作成やCodexに詳しい方々にデ

ータを確認していただきました。そして修正すべき点を指摘してもら

い、それらの修正を反映いたしました。

（※セッションでお話した内容でも決して間違いではなくよりテーマ

のデータがよりクオリティの高いものになったという意味になりま

す。）

そのため一部ですがスライドとテーマデータに変更があり、変更点を

追加したスライドとなっています。

12年11月23日金曜日

ながとみちはる

元アパレルデザイナー。

10年前にWEB制作会社にデザイナーとして就職。そして現在はplus design campanyで制作でもなんでもするディレクターして従事。

uwasora.com（写真ブログ）

2012年11月4日日曜日

このセッションでのお持ち帰りのテーマについての

お知らせとお願いがあります。


ここ！セッションでは挿入画像の配置についてスタイル制御は対応しない予定でしたがcodexにより準拠させるために、後日、CSSを追加しています。


＊目次・なぜこのテーマを作ろうと思ったのか？・ワイヤーフレームをつくろう！・テーマを作成してみよう・管理画面での設定・プラグインについて


なぜこのテーマを作ろうと思ったのか？


初めてテーマを作ろうと思った時に・・・Twenty elevenは多機能すぎて使いこなせない。toolboxも上手にカスタマイズできなった。（ながとみ・石田・森光談）


それなら自分たちで作ってしまおう！！

もっと簡単に理解できるようなテンプレートの見本が欲しいと思った


まずはWordPressの構造を知ろう


WordPressのフォルダ構成


wp-content themes

twentyeleven

twentyten

wcosaka2012

WordPress

index.php

WordCamp Osaka theme


管理画面からテーマのインストール

テーマのインストールはここからもできます


＊サイトの構成を考える

トップページ事業案内（詳細）

お知らせ（一覧）　　　　（詳細）

事業案内

お知らせ

お問い合わせ

サイトマップ


ワイヤーフレームをつくろう！


一̈一一一̈一一̈一一̈一一一̈一一一一一一̈一̈一一̈̈一一一̈一̈一一一̈一一̈一一一一

一オ一一一ヽいヤ一ヽ一二一一ヤ一ヽＡ″７一“十二〓一，ｒ十十十一一十

一一一一一一一̈一一一一一一̈̈一一一一一一一一一一一一一̈一̈一一一一一一一一一一一̈一̈一̈̈一一一一一一一一一一一一一一一一一一一一一一一一̈一一一一一一





じゃぁ、次はコーディング！


の前に、ちょっと脱線して子テーマのおはなし・・・


実はテーマを作る方法って2種類あるんです。


１，オリジナルで１から作る。

２，今あるテーマをカスタマイズして作る。

こっち！これがもう一つのテーマ作成の方法


http://wpdocs.sourceforge.jp/子テーマ

WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

日本語Codex／子テーマより引用・・・


http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

http://wpdocs.sourceforge.jp/%E5%AD%90%E3%83%86%E3%83%BC%E3%83%9E

http://wpdocs.sourceforge.jp/子テーマ

WordPressの子テーマとは、別のテーマ（親テーマ）の機能を継承し、その機能にさらに機能を追加したりその機能を調整したりすることのできるテーマです。

もっとも単純な形式では style.css ファイルを一つだけ備えたディレクトリとなり、制作がとても簡単です。HTML と CSS に精通していればプログラミングの知識は必要ありません。また、基本的には親テーマ自身にはまったく手を加えないで親テーマのスタイルやレイアウトを好きなだけ変更することができます。そのため、親テーマがアップデートされても子テーマの変更は保持されます。さらに、PHP や WordPress Plugin API を基本的に理解していれば、自分の子テーマの中で PHP を使い、親テーマにまったくさわることなくどのような改変でも可能になります。

日本語Codex／子テーマより引用・・・

つまりどういうことかというと

CSSを適用させて見た目だけ自分のオリジナルテーマっぽくすることができるテーマ作りを子テーマを作るというのです。


Twenty Eleven子テーマとして、 twentyeleven_child を作ります。子テーマ用のstyle.css作り、親テーマのTwenty Elevenに子テーマのCSSを適用すると機能はそのままで見た目だけが違うテーマがつくれてしまうのです。

twentyeleven_child style.css

twentyeleven

見た目が別のサイトのように！


本題に戻って、コーディングをしよう！


今回は『HTML5+CSS3』でコーディング。


ここを下層ページで使いまわします


テーマを作成してみよう


まずはローカル側にフォルダを用意

オリジナルのテーマを作るために、まずはパソコン上でフォルダを作成していきます。

style.css

wcosaka2012

index.php

生成するページに関する設定を記述


style.cssにテーマとする必要な情報を記述

@charset "UTF-8";/*Theme Name:テーマの名前Theme URI:テーマを配布する際はここにURLDescription:テーマの説明ですAuthor:作成者名。Author URI:作成者のサイトURLVersion:テーマのバージョンを書きます。*/

この情報がテーマの管理画面で表示


CSSのコメントアウトの内容がここに表示されるのです

style.cssと同階層にscreenshot.pngを設置


用意したサムネイル画像（300×225ピクセル）

style.css

wcosaka2012 index.php

screenshot.png


ひとまずアップロードデフォルトで入っているテーマ「twentyeleven」と同階層に、先ほど作った「wcosaka2012」のフォルダをUP

ここにアップします。


それではindex.phpにテーマとするのに必要な情報を記述したものを見て行きましょう

その前に・・・・


今回作成するPHPの種類

　・index.php（トップページ）　　　- header.php（ヘッダー）　　　- footer.php（フッター）　　　- sidebar.php（サイドバー）

　・single.php（単一記事ページ）　　　・archive.php（アーカイブページ）

　・page.php（個別ページ）

　・style.css（スタイルシート）

共通利用

スタイルシート

固定ページ

投稿ページ

テキスト

セッションではこの様に紹介しましたがcodexにより準拠させるためにcomments.phpを追加しました。

※comments.phpはTwenty elevenからそのままコピー&ペーストで追加。


今回作成するPHPの種類（改）

　・index.php（トップページ）　　　- header.php（ヘッダー）　　　- footer.php（フッター）　　　- sidebar.php（サイドバー）

　・single.php（単一記事ページ）　　　・archive.php（アーカイブページ）　・comments.php（コメントページ）

　　・page.php（個別ページ）　・style.css（スタイルシート）

共通利用

スタイルシート固定ページ

投稿ページ

←追加しました


header.php

sidebar.php

footer.php


切り分けたテンプレートを呼び出して表示させます！

これを「インクルード」するって言います！

切り分けちゃったらどうなるの？


header.php

sidebar.php

footer.php

これらを呼び出すために記述

「index.php」に各パーツ部分のテンプレートを“インクルード“させるようにして記述していきます

header.phpをインクルード

sidebar.phpをインクルード

footer.phpをインクルード


åß

こことか

こことか

<ul><?php query_posts('posts_per_page=3&category_name=news'); ?><?php while (have_posts()) : the_post(); ?><li><span class="postDate"><?php the_time('Y年n月j日'); ?></span><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></li><?php endwhile;wp_reset_query(); ?></ul>


ヘッダーテンプレートを呼び出す（インクルードする）ための命令文<?php get_header(); ?>

フッターーテンプレートを呼び出す（インクルードする）ための命令文<?php get_footer(); ?>

テンプレートをサイドバー呼び出す（インクルードする）ための命令文<?php get_sidebar(); ?>

インクルードタグhttp://wpdocs.sourceforge.jp/インクルードタグ


wcosaka20

index.php

header.php

footer.php

sidebar.php

style.css

screenshot.png

ここまで作ったファイルは全部でこんな感じ


管理画面での設定内容


おしらせカテゴリーのスラッグを登録


「お知らせ」カテゴリスラッグに「news」と入れる。


スラッグの「news」がURLになります


スラッグの「news」がURLになります

さっき管理画面で入力したスラッグ名


<?php query_posts('posts_per_page=3&category_name=news'); ?>

TOPページのテンプレートとひもづいてお知らせ記事の最新３件が表示されるようになる。


カスタムメニューの登録


外観→メニュー、からメニューを２つ登録する。


メニューの名前は,テンプレートの指定に合わせてglobalNav、footerMenu　にします。


トップページの作成


固定ページを１件作成し、テンプレートを「トップページ」にします。


設定→表示設定、フロントページを「トップページ」にします。

先ほどの固定ページに入れた内容がサイトトップに表示されるようになります。


そして、もう一つ・・・functions.php


functions.phpの記述→カスタムメニュー

ここ！add_theme_support( 'menus' );


functions.phpの記述した内容→ウィジェット

<?php dynamic_sidebar('side1'); ?>今回はウィジェットエリアを２個用意しようと思うので、まずfunctions.phpに下記のとおり書いて２個のウィジェットを登録します。それぞれ、side1、side2というIDが振られています。

ここ！


functions.phpの記述した内容→アイキャッチ

テンプレートでアイキャッチ画像を使えるようにする。add_theme_support( 'post-thumbnails' );

ここ！


プラグインの解説

・パンくず　→Breadcrumb NavXT

・お問い合わせフォーム　→contact Form 7

・カルーセル　→Easing Slider（トップページのスライドショーエリア）

・サイトマップ　→PS Auto Sitemap（サイトマップページを生成）

・表示管理　→My Page Order（ページの表示順を変える）

使用するプラグイン一覧


パンくず→Breadcrumb NavXT

<div class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?></div>


お問い合わせフォーム→contact Form 7

ここ！





このコードをお問い合わせの投稿ページに貼り付ける




カルーセル→Easing Slider（トップページのスライドショーエリア）



<div id="mainVisual"><?php if (function_exists('easing_slider')){ easing_slider(); }; ?></div>



ここから！


サイトマップ→PS Auto Sitemap（サイトマップページを生成）

ここ！



ここ！




表示管理→My Page Order（ページの表示順を変える）


補足説明：コメント機能の停止方法

コメント機能の停止はさせるには投稿編集＞ディスカッションの『チェック」をはずします。


セッション・テーマ作成協力者森光加奈子・石田美穂


ありがとうございました。


Documents

デザイナーが本当に欲しかったオリジナルなテーマつくっちゃいました！解説とテーマお持ち帰り