101210 supreme web adobe seminar nagoya
DESCRIPTION
TRANSCRIPT
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!
