101210 supreme web adobe seminar nagoya

2010.12.10 Supreme Web Adobeセミナー Nagoya

WordPressとDreamweaver CS5の連携

Hello!

Hello!

豊田 有

@mighty_works

世界を救うWebクリエイター

WordPressが好き♥

Dreamweaverも好き♥

CSS Nite in NAGOYA

WordCamp Nagoya

Talk Note

本日の流れ

本日の流れ

WordPressについて

Dreamweaver CS5との連携

WordPressについて

事例紹介

ブログTechCrunch

ブログ百式

ブログmixi engineers_blog

企業サイト株式会社ベクター

企業サイトクックパッド株式会社

コミュニティーサイトloftwork.com

有名人Sylvester SALLONE

有名人蓮舫

メリット

世界標準である（トップクラスのシェア）国内外の情報が多いプラグインやテーマが豊富♪PHPを学べるライセンス料が不要（=無料で利用出来る）

かっこいい♥

基本機能

基本機能コンテンツの投稿方法外観（テーマ）プラグイン

WordPress と

Dreamweaver CS5 の

連携

テーマ制作の基礎知識

制作工程

デザイン作成

コーディング

WordPress実装

必須ファイルindex.phpstyle.css

style.cssにテーマの情報を記載する。

ここに記載するとWordPressは

テーマとして認識します。

WordPressにテーマとして認識させるためには...

style.cssへの記述例

/*

Theme Name: テーマの名前

Theme Description: テーマの説明文

Author: テーマの制作者

Author URI: テーマの制作者のURI

Version: テーマのバージョン

*/

WordPressテーマの構成

テンプレートファイル

index.phpheader.phpfooter.phpsidebar.phpsidebar-footer.phpsingle.phppage.phponecolumn-page.phpfunctions.php

tag.php404.phparchive.phpattachment.phpauthor.phpcategory.phpcomments.phploop.phpsearch.php

デフォルトテーマ TwentyTen のファイル構成

テンプレートファイル

header.phpfooter.phpsidebar.php

index.phpsingle.phppage.php

functions.php

テンプレートファイル

テンプレートファイルパーツを表示するファイル

ファイル名 説明

header.php ヘッダーエリアを表示

footer.php フッターエリアを表示

sidebar.php サイドバーエリアを表示

テンプレートファイル各ページを出力するファイル

ファイル名 説明

index.php 基本的にはTOPで表示

single.php 投稿を個別で表示

page.php ページを表示

※詳しくはテンプレート階層を参照

　　index.php　　single.php　　page.php

header.php

footer.php

sidebar.php

特殊テンプレートファイル関数などを記載するファイル

ファイル名 説明

functions.php テーマで利用する関数などを記載する。

ウィジェット、カスタムメニュー、カスタム背景、カスタムヘッダーを利用する場合もこのファイルに記述が必要。

Dwの設定

ローカルサーバーの構築

XAMMP MAMP

or

テンプレートタグ

bloginfo タグWordPressの基本情報を表示するタグ

タグ 説明

<?php bloginfo('name'); ?> サイトのタイトル

<?php bloginfo('stylesheet_url'); ?> メインCSSのURL

<?php bloginfo('url'); ?> サイトURL

機能を表示するタグ便利な機能を呼び出すタグ

タグ 説明

<?php wp_nav_menu(); ?> カスタムナビゲーションを表示

<?php dynamic_sidebar(); ?> ウィジェットを表示

LOOP

LOOPくり返し処理

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

//記事のフォーマット <?php endwhile; ?>

<?php else : ?>

//コンテンツがない時の表示

<?php endif; ?>

コンテンツを表示するタグ投稿内容を表示するタグ

タグ 説明

<?php the_permalink() ?> URLを表示

<?php the_title(); ?> タイトルを表示

<?php the_content(); ?> 本文を表示

<?php the_time() ?> 公開時間を表示

<?php the_category() ?> カテゴリを表示

<?php the_tags(); ?> タグを表示

パーツテンプレートタグパーツを表示するタグ

タグ 説明

<?php get_header(); ?> header.php を表示

<?php get_footer(); ?> footer.php を表示

<?php get_sidebar(); ?> sidebar.php を表示

最後に

Let's get started.

さぁ始めよう!

I wish you a merry Christmas!

Thank you.website : http://mighty-works.com/mail : toyoda@mighty-works.com

twitter : @mighty_works