What you'll learn

html+cssで構成されたどのようなデザインでも、Wordpress化することが出来るようになります。

Course content

2 sections • 20 lectures • 1h 48m total length

Wordpressでのデザイン・カスタマイズの流れ3:48
WPのテンプレート階層を理解する0:07

デザイン・ファイルの確認1:54
今回のテーマ作成方針3:57

今回作成するテンプレート・ファイル4:52

作る	ファイル名	内容
	基本テンプレート
✔	front-page.php(xxxx.php)	トップページ【元デザインの index.html をリネーム】（固定ページとして作る場合は任意の名称のphpファイルとする）
✔	index.php	一般テンプレート【元デザインの page.html をリネーム】
	archive.php	一覧ページ
	category.php	カテゴリー一覧
	page.php	固定ページ
	search.php	検索結果
	404.php	ページが見つからない場合のテンプレート
	部品テンプレート
✔	header.php	ヘッダー部分【元デザインの html から切り出す】
✔	footer.php	フッター部分【元デザインの html から切り出す】
✔	sidebar.php	サイドバー部分【元デザインの html から切り出す】
	スタイルシート
✔	style.css	メインのcss.【実際のスタイル記述は既存のcssをそのまま利用】

	functions.php	追加機能のためのPHP。今回はウィジェットおよびカスタムメニューのために使用。

テーマ作成の準備：エラー表示の設定2:21
WPにテーマを認識させる7:26
#WPにテーマを認識させるためのコード
style.css
/*

Theme Name: テーマの名前**

Description:テーマの説明*

Theme URI: テーマの URL

Author: 作った人の名前*

Author URI: 作った人の URL

Version: バージョン

License: ライセンス

License URI: ライセンスの URL

*/
**必須項目
*必須ではないが記入したほうが良い項目
その他のファイルの準備・TOPページの設定6:18
# カスタムテンプレートの認識
テンプレートファイルの頭にこの記述を入れる
<?php
/*

Template Name: テンプレートの名前

*/
?>

空ページの作成2:39

今回作成する固定ページとスラッグ例

・スラッグ名は内部リンクを貼ることを考え、極力シンプルで分かりやすいものとしましょう。

・本文には内容表示のテストが行えるよう、ダミーテキストを入れておきましょう。

トップページ	top
新着情報	news
サービス・設備	service
客室・料金	room
料理	food
アクセス	access
会社概要	company
採用情報	recruit
お問い合わせ	contact
プライバシー・ポリシー	privacy

共通パーツを制作8:05
# パーツを呼び込むコード
ヘッダーを呼ぶ

<?php get_header(); ?>

フッターを呼ぶ

<?php get_footer(); ?>

サイドバーを呼ぶ

<?php get_sidebar(); ?>
ファイルパスの変更【関連ファイル】8:19
#テンプレート・ディレクトリまでの絶対パスを自動的に出力するタグ
<?php echo get_template_directory_uri();?>

または

<?php bloginfo(‘template_directory’);?>
※最後のスラッシュは出力されない

#サイトURLを自動的に出力するタグ
<?php echo home_url();?>

または

<?php bloginfo('url'); ?>
ファイルパスの変更【内部リンク】5:12
必須タグを挿入する6:32
＃WPの必須タグ
<?php body_class();?>

　<body>タグの中に入れる

　例：<body <?php body_class(); ?>>

<?php wp_head();?>

　<head></head>タグの間に入れる。

<?php wp_footer();?>

　フッターのどこかに入れる
WPループについて10:07
＃WPループ　基本のコード
<?php

if ( have_posts() ) {

while ( have_posts() ) {

the_post();

?>

// ここに１記事分のｈｔｍｌが来る

//

<?php

} // end while

} // end if

?>
＃ループ中で使えるタグ
<?php the_title();?>・・・タイトルを出力

<?php the_content();?>・・・記事本文を出力

<?php the_date();?>・・・日付を出力

<?php the_post_thumbnail();?>・・・アイキャッチ画像を出力

<?php the_author();?>・・・投稿者名を出力

<?php the_category();?>・・・カテゴリー名を出力

<?php the_excerpt();?>・・・抜粋を出力

<?php the_permalink();?>・・・記事へのリンクを出力
その他は以下を参照
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0
ウィジェットに対応する8:16
＃functions.phpに以下のコードを加えるregister_sidebar( array(

'name' => 'サイドバーウィジット-1',

'id' => 'my-sidebar',

'description' => 'サイドバーのウィジットエリアです。',

'before_widget' => '<li>',

'after_widget' => '</li>',

) );
＃sidebar.phpに以下のコードを加える
<?php dynamic_sidebar('my-sidebar'); ?>
カスタムメニューに対応する7:28
＃functions.phpに以下のコードを加える

register_nav_menu('footer_menu', 'フッターメニュー');

＃メニューを表示したい箇所（今回はfooter.php）に以下のコードを加える

<?php

wp_nav_menu( array(

'theme_location'=>'footer_menu',

));

?>
サイト・タイトルとデスクリプションの処理7:15
パンくずリストの調整（ループ外にページタイトルを表示）3:08
•パンくずリストでは該当記事のタイトルを表示する必要がある

•ループ外で記事のタイトルを表示したい場合は

<?php single_post_title() ;?>　（記事の場合）

<?php single_cat_title() ;?>　（アーカイブの場合）

<?php wp_title() ;?>　（下層ページ全般）
「新着情報」ページにページ送りを実装8:14
＃一覧ページにページネーションを付ける

次のページへのリンク

<?php next_posts_link('次へ'); ?>

前のページへのリンク

<?php previous_posts_link('前へ'); ?>

＃一覧ページに専用のテンプレートを用意する

今回は極力テンプレート数の少ないものを目指す関係上index.phpに記述しましたが、実際にはarchive.phpを用意したほうが細かなアレンジが出来るのでお勧めします。

index.phpの複製を作り、archive.phpとリネームすれば、一覧ページにおいてarchive.phpが自動的に使用されます。
【補足】スクリプト／スタイルシートをキューする方法2:05

Requirements

htmlおよびcssの基礎知識
FTPによるファイルのアップ/ダウンロード
テキストエディタの基本操作
Wordpressの基本操作

Description

Wordpressを使いサイト制作をする場合、大きく分けると２つのアプローチが考えられます。

ひとつが、イメージに近いテーマ（またはデフォルト・テーマ等）を使用し、cssや画像のカスタマイズを重ねてイメージに近づけていくという方法です。

そしてもうひとつがデザインを先に起こし、これをWordpressのテーマに変換するという方法です。

　どちらの方法も一長一短があり、どの方法を取るべきかは状況に応じて変わってきます。

ただ、イメージ通りのデザインでワードプレスを運用したい場合などは、オリジナルでデザインを作成し、あとからテーマ化する方が様々なメリットがあります。

またこの場合、サイトの制作フローもデザイン→コーディング→テーマ化→その他の構築作業、と段階を追って進めることが出来ます。言い換えればデザイナー、コーダー、エンジニアと役割分担をすることが可能になります。

そのため、WEB制作の現場ではこの方法が良く採用されています。

そして何よりも、テーマを制作することを通じてワードプレスの構造を知ることが出来、カスタマイズの力を身に付けることが出来ます。

　この講座では「あらかじめ用意されたデザイン・ファイルをWPテーマに変換する」という実習を行っていきます。そしてこの作業を通して、静的なサイトをWPによる動的なサイトに作り変えるコツをお伝えしたいと思います。

　ここでは極力シンプルな構成でテーマ作成を行いますが、基本を押さえていただければさらにご自身でテンプレートを簡単に増やしていただくことも出来ます。

　ぜひ、Wordpressのテーマ作成のテクニックを身につけていただき、サイト制作と表現力の幅を拡げていただければと思います。

Who this course is for:

・デザインとコーディングは出来るが、WPに組み込むノウハウを知りたい方。
・Web関連の業務をされていて、受注の幅を広げたい方。
・WPを導入してみたものの、気に入ったデザインのテーマが見つからない方。
・WPのカスタマイズの総合力を身に付けたい

What you'll learn

Explore related topics

Course content

WPの「テーマ」を理解する2 lectures • 4min

「デザインのテーマ化」制作実習18 lectures • 1hr 44min

Requirements

Description

Who this course is for: