Weitere ähnliche Inhalte
Ähnlich wie Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」 (20)
Word bench長崎01「オリジナルテーマで学ぶwordpressの基本」
- 3. テーマの作成に入る前に…
1.ダッシュボード > プラグイン
WP Multibyte Patch を有効化
2.ダッシュボード > 設定 > パーマリンク設定
カスタム構造:/blog/%year%/%monthnum%/%day%/%post_id%/
3.ダッシュボード > 固定ページ
トップページ用ページ作成(タイトル:ホーム、スラッグ:home)
ブログトップページ用ページ作成(タイトル:ブログ、スラッグ:blog)
4.ダッシュボード > 設定 > 表示設定 > フロントページの設定
フロントページ:ホーム
投稿ページ:ブログ
5.ダッシュボード > 設定 > メディア設定
中サイズ:幅の上限 300px(任意) 高さの上限 9999px
大サイズ:幅の上限 (ページ幅) 高さの上限 9999px
6.ダッシュボード > プラグイン > 新規追加
PS Disable Auto Formatting をインストール、有効化
13年9月14日土曜日
- 8. 今回のデモサイトのテンプレート構成
・ 404.php
- 404ページ
・ archive-news.php
- 新着情報の一覧ページ
・ comments.php
- コメントテンプレート
・ editor-style.css
- 記事入力欄用スタイルシート
・ footer.php
- フッターテンプレート
・ front-page.php
- トップページ
・ functions.php
- 各種設定や関数定義
・ header.php
- ヘッダーテンプレート
・ index.php
- メインテンプレート(今回はブログの一覧ページで使用)
・ license.txt
- ライセンス情報
・ page.php
- 固定ページ
・ screenshot.png
- 管理画面で表示するスクリーンショット
・ sidebar.php
- サイドバーテンプレート
・ single-news.php
- 新着情報の詳細ページ
・ single.php
- ブログの詳細ページ
・ style.css
- テーマ定義(/css/内のcssファイルをimport)
13年9月14日土曜日
- 9. 今回はこんな感じでファイルを分割
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" xmlns:og="http://ogp.me/ns#"
" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
...
</head>
<body class="home">
<div id="container">
" <div id="header">
...
" <!-- end #header --></div>
" <div id="contents">
" " <div class="content">
" " " <div id="main">
" " " " ...
" " " " ...
" " " " ...
" " " " ...
" " " " ...
" " " " ...
" " " <!-- end #main --></div>
" " " <div id="sub">
" " " " ...
" " " <!-- end #sub --></div>
" " <!-- end .content --></div>
" <!-- end #contents --></div>
" <div id="footer">
" " ...
" <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
header.php
sidebar.php
footer.php
front-page.php とか page.php とか
13年9月14日土曜日
- 10. header.php を作ってみよう
・ wp_head();
- 必須。主にプラグイン等が必要なjsや
cssを出力するのに利用される
・ wp_title( '»', false, 'right' );
- ページタイトル + 区切り文字を返す
・ bloginfo( 'name' );
- サイト名を出力
・ body_class();
- ページに応じてclassを出力。bodyタグに
記述する
・ get_stylesheet_uri();
- style.cssのhttpパスを返す
・ get_stylesheet_directory_uri();
- テーマディレクトリのhttpパスを返す
・ home_url();
- サイトURLを返す。引数に、後に続くパスを
指定可能(/news/とか)
・ is_front_page()
- トップページの場合に true を返す
・ get_archive_title();
- アーカイブタイトル(ページが属するカテゴ
リ、ページ名)を返す( functions.phpに定義)
・ bcn_display();
- パンくずリストを表示
(プラグインBread Crumb NavXT使用)
・ <?php global $template; echo
basename( $template, '.php' ); ?>.php
- 使用テンプレート名を返す
13年9月14日土曜日
- 11. header.php を作ってみよう
◎タイトル
<title>新着情報 | Web Paradice Creative</title>
!
<title><?php echo wp_title( '|', false, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
◎JS・CSSへのパス
<script type="text/javascript" src="../js/main.js"></script>
!
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/main.js"></
script>
※jQuery は functions.php で WordPress 組み込みの jQuery の読み込み指定がしてあるので、header.php に記述は不
要です。
◎ロゴ
<a href="./index.html”><img src=”./images/common/logo.gif" alt="Web Paradice Creative" /></a>
!
<a href="<?php echo home_url(); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/
images/common/logo.gif" alt="Web Paradice Creative" /></a>
13年9月14日土曜日
- 12. header.php を作ってみよう
◎メインビジュアル
<div id="mainVisual">
" <?php if ( is_front_page() ) : ?>
" <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/main.gif" alt="" />
" <?php else : ?>
" <h2><?php echo get_archive_title(); ?></h2>
" <div id="topicPath">
" " <p>
" " " <?php bcn_display(); ?>
" " </p>
" <!-- end #topicPath --></div>
" <div id="introduction">
" " <p>
" " " このページの投稿タイプは <?php echo get_post_type(); ?> です。<br />
" " " テンプレートファイルは <?php global $template; echo basename( $template, '.php' ); ?>.php
を使用しています。
" " </p>
" <!-- end #introduction --></div>
" <?php endif; ?>
<!-- end #mainVisual --></div>
※1つの header.php でトップページとそれ以外のページの2種類の mainVisual を表示させるため、is_front_page() でト
ップページかどうかを判別させる。
13年9月14日土曜日
- 13. sidebar.php を作ってみよう
・ ブログ(投稿タイプ post)のときだけウィジェットを有効にして新
着記事とカテゴリー一覧を表示させる。
※今回はfunctions.phpで sidebar-widget-area というウィジェットエ
リアを定義済みです。
・ get_post_type()
- 現在の投稿タイプ名を返す
・ is_active_sidebar( 'sidebar-widget-area' )
- ウィジェットが有効ならtrue(引数はウィジェットエリア名)
・ dynamic_sidebar( 'sidebar-widget-area' );
- ウィジェットを表示(引数はウィジェットリエア名)
13年9月14日土曜日
- 14. sidebar.php を作ってみよう
◎ウィジェット
<div class="widget-container">
" <dl>
" " <dt class="widget-title">LATEST ENTRIES</dt>
" " <dd class="widget-content">
" " " <ul>
" " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li>
" " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li>
" " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li>
" " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li>
" " " " <li><a href="./single.html">ブログ記事のタイトルが入ります。</a></li>
" " " </ul>
" " </dd>
<!-- end .widget-container --></div>
!
<?php
if ( get_post_type() == 'post' ) {
" if ( is_active_sidebar( 'sidebar-widget-area' ) )
" " dynamic_sidebar( 'sidebar-widget-area' );
}
?>
※ブログの LATEST ENTRIES と CATEGORIES はウィジェットで設置する。ブログ以外ではウィジェットは不要なので、
get_post_type() == ‘post’ で 投稿タイプが post ( = ブログ ) のときだけウィジェットを表示させる。
13年9月14日土曜日
- 16. トップページ(front-page.php) を作ってみよう
・ トップページには 新着情報 と ブログ の新着記事を表示させる。
新着情報は「カスタム投稿タイプ」機能を使って作成する。
・ とりあえず、これは後回しにしてhtmlを表示できるところまで…。
・ get_header();
- header.php をインクルード
・ get_sidebar();
- sidebar.php をインクルード
・ get_footer();
- footer.php をインクルード
・ post_class();
- 投稿情報に応じてclassを出力。エントリー全体をz
囲むdivに記述する。
13年9月14日土曜日
- 18. page.php(固定ページ) を作ってみよう
<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
<div <?php post_class(); ?>>
" <div class="entry-content">
" " <?php the_content(); ?>
" <!-- end .entry-content --></div>
<!-- .hentry --></div>
<?php endwhile; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
投稿情報がある間、ループ
※固定ページの場合、投稿情報は1つだけなので、実際はループさせなくても良いのですが、
archive系のテンプレートと記述を統一させたほうがわかりやすいのでループさせています。
※投稿情報が1つなので、the_post() で投稿情報を更新する必要も実際は無いです。
投稿情報をグローバル変数にセット
管理画面で入力した本文を出力
13年9月14日土曜日
- 19. ブログ(index.php) を作ってみよう
・ has_post_thumbnail()
- アイキャッチ画像が設定されている場合
true を返す。
・ the_post_thumbnail( 'サイズ名' );
- アイキャッチ画像を出力。引数に
サイズ名を指定可能。
サイズは functions.php で追加可能。今回は
「blogThumbnail」というサイズ名を使用。
・ the_time( ‘フォーマット’ )
- 投稿日時を表示。引数は php の date関数と
同じフォーマット。
・ the_permalink();
- 記事へのパーマリンクを表示。
・ the_title();
- 記事タイトルを表示。
・ the_category( '区切り文字' );
- 記事に設定されたカテゴリーを
区切り文字で区切って表示
・ comments_link();
- 詳細ページコメントエリアへのURLを表示
(http://hoge.com/xxx/#comments)
・ comments_number( '0', '1', '%' );
- コメント数を表示
(引数は、0のとき、1のとき、2以上のとき)
・ the_excerpt();
- 抜粋を表示
13年9月14日土曜日
- 22. トップページに新着情報を表示しよう
<?php
$posts_news = get_posts( array(
'post_type' => 'news',
'posts_per_page' => 3
) );
?>
<div id="news">
" <h2><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/news/lbl.gif"
alt="News" /></h2>
" <?php if ( !empty( $posts_news ) ) : ?>
" <ul>
" " <?php foreach ( $posts_news as $post ) : setup_postdata( $post ); ?>
" " <li>
" " " <dl>
" " " " <dt><?php the_time( 'Y.m.d' ); ?></dt>
" " " " <dd><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></dd>
" " " </dl>
" " </li>
" " <?php endforeach; wp_reset_postdata(); ?>
" </ul>
" <p class="more">
" " <a href="<?php echo home_url( '/news/' ); ?>"><img src="<?php echo
get_stylesheet_directory_uri(); ?>/images/common/more.gif" alt="more" /></a>
" </p>
" <?php else : ?>
" <p>
" " 現在、新着情報はありません。
" </p>
" <?php endif; ?>
<!-- end #news --></div>
13年9月14日土曜日
- 23. トップページにブログを表示しよう
<?php
$posts_blog = get_posts( array(
" 'post_type' => 'post',
" 'posts_per_page' => 5
) );
?>
<div id="blog">
" <h2><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/lbl.gif" alt="Blog" /></h2>
" <?php if ( !empty( $posts_blog ) ) : ?>
" <ul>
" " <?php foreach ( $posts_blog as $post ) : setup_postdata( $post ); ?>
" " <li>
" " " <a href="<?php the_permalink(); ?>">
" " " " <span class="thumbnail">
" " " " " <?php if ( has_post_thumbnail() ) : ?>
" " " " " <?php the_post_thumbnail(); ?>
" " " " " <?php else : ?>
" " " " " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/no-photo.gif" alt="" />
" " " " " <?php endif; ?>
" " " " " <span class="title"><?php the_title(); ?></span>
" " " " </span>
" " " " <span class="date"><?php the_time( 'Y.m.d' ); ?></span>
" " " </a>
" " </li>
" " <li>
" " " <a href="<?php echo home_url( '/blog/' ); ?>">
" " " " <span class="thumbnail">
" " " " " <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/home/blog/more.gif" alt="more" />
" " " " </span>
" " " </a>
" " </li>
" " <?php endforeach; wp_reset_postdata(); ?>
" </ul>
" <?php else : ?>
" <p>
" " 現在、表示できるブログ記事はありません。
" </p>
" <?php endif; ?>
<!-- end #blog --></div>
13年9月14日土曜日
- 24. お問い合わせページを作ろう
・ 多機能フォームプラグイン「MW WP Form」を使います!
✓ ショートコードを使用したフォーム生成
✓ 確認画面が表示可能
✓ 同一URL・個別URLでの画面変遷が可能
✓ 豊富なバリデーションルール
・ マニュアル
⇒ http://2inc.org/manual-mw-wp-form/
・ 見たほうが早いと思うのでデモります!
13年9月14日土曜日
- 25. その他
・ パンくずリストの表示
⇒ Bread Crumb NavXT
・ カスタム投稿タイプのパーマリンク設定
⇒ Custom Post Type Permalinks
・ JSの読み込みは wp_enqueue_script が便利
⇒ wp_enqueue_script( ‘名前’, httpパス, array( 必要jsの名前 ), バージョン, フッター出力するか );
13年9月14日土曜日
- 26. 今回の使用プラグインまとめ
・ パンくずリストの表示
⇒ Bread Crumb NavXT
・ カスタム投稿タイプのパーマリンク設定
⇒ Custom Post Type Permalinks
・ カスタム投稿タイプを作成
⇒ Custom Post Type UI
・ フォーム作成
⇒ MW WP Form
・ HTMLモード利用時のオートフォーマッティング回避
⇒ PS Disable Auto Formatting
・ 日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化
⇒ WP Multibyte Patch
13年9月14日土曜日