Wordpressカスタマイズ講座【テーマ作成編】
4.1 (12 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
113 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Wordpressカスタマイズ講座【テーマ作成編】 to your Wishlist.

Add to Wishlist

Wordpressカスタマイズ講座【テーマ作成編】

デザイン・ファイルをWPテーマにコンバートし、完全オリジナルなWPサイトを制作しましょう!
4.1 (12 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
113 students enrolled
Created by Yusuke Kohno
Last updated 12/2016
Japanese
Current price: $10 Original price: $30 Discount: 67% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 2 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • html+cssで構成されたどのようなデザインでも、Wordpress化することが出来るようになります。
View Curriculum
Requirements
  • htmlおよびcssの基礎知識
  • FTPによるファイルのアップ/ダウンロード
  • テキストエディタの基本操作
  • Wordpressの基本操作
Description

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

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

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

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

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

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

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

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

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

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

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

Who is the target audience?
  • ・デザインとコーディングは出来るが、WPに組み込むノウハウを知りたい方。
  • ・Web関連の業務をされていて、受注の幅を広げたい方。
  • ・WPを導入してみたものの、気に入ったデザインのテーマが見つからない方。
Students Who Viewed This Course Also Viewed
Curriculum For This Course
19 Lectures
01:45:43
+
WPの「テーマ」を理解する
2 Lectures 03:48

WPのテンプレート階層を理解する
00:00
+
「デザインのテーマ化」制作実習
17 Lectures 01:39:56

元デザインファイル入手先

http://www.coolwebwindow.com/template/public.php

講座内ではNo.14を使用しています。

デザイン・ファイルの確認
01:54

今回のテーマ作成方針
03:57

作る

ファイル名

内容

基本テンプレート

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。今回はウィジェットおよびカスタムメニューのために使用。

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

#WPにテーマを認識させるためのコード

style.css

/*

Theme Name: テーマの名前**

Description:テーマの説明*

Theme URI: テーマの URL

Author: 作った人の名前*

Author URI: 作った人の URL

Version: バージョン

License: ライセンス

License URI: ライセンスの URL

*/

**必須項目

*必須ではないが記入したほうが良い項目

WPにテーマを認識させる
07:26

# カスタムテンプレートの認識

テンプレートファイルの頭にこの記述を入れる

<?php

/*

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

*/

?>

その他のファイルの準備
06:18

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

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

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

トップページ

top

新着情報

news

サービス・設備

service

客室・料金

room

料理

food

アクセス

access

会社概要

company

採用情報

recruit

お問い合わせ

contact

プライバシー・ポリシー

privacy

空ページの作成
02:39

# パーツを呼び込むコード

ヘッダーを呼ぶ

<?php get_header(); ?>

フッターを呼ぶ

<?php get_footer(); ?>

サイドバーを呼ぶ

<?php get_sidebar(); ?>

共通パーツを制作
08:05

#テンプレート・ディレクトリまでの絶対パスを自動的に出力するタグ

<?php echo get_template_directory_uri();?>

または

<?php bloginfo(‘template_directory’);?>

※最後のスラッシュは出力されない


#サイトURLを自動的に出力するタグ

<?php echo home_url();?>

または

<?php bloginfo('url'); ?>


ファイルパスの変更【関連ファイル】
08:19


#WPの必須タグ

<?php body_class();?>

 <body>タグの中に入れる

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

<?php wp_head();?>

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

<?php wp_footer();?>

 フッターのどこかに入れる

必須タグを挿入する
06:32

#WPループ 基本のコード

<?php

  if ( have_posts() ) {

  while ( have_posts() ) {

  the_post();

?>

// ここに1記事分のhtmlが来る

//

<?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

WPループについて
10:07

#functions.phpに以下のコードを加えるregister_sidebar( array(

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

'id' => 'my-sidebar',

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

'before_widget' => '<li>',

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

) );

#sidebar.phpに以下のコードを加える

<?php dynamic_sidebar('my-sidebar'); ?>


ウィジェットに対応する
08:16

#functions.phpに以下のコードを加える

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


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

<?php

wp_nav_menu( array(

            'theme_location'=>'footer_menu',

));

?>


Preview 07:28

サイト・タイトルとデスクリプションの処理
07:15

•パンくずリストでは該当記事のタイトルを表示する必要がある

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

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

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

<?php wp_title() ;?> (下層ページ全般)

パンくずリストの調整(ループ外にページタイトルを表示)
03:08

#一覧ページにページネーションを付ける

次のページへのリンク

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

前のページへのリンク

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


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

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

index.phpの複製を作り、archive.phpとリネームすれば、一覧ページにおいてarchive.phpが自動的に使用されます。

「新着情報」ページにページ送りを実装
08:14

【補足】スクリプト/スタイルシートをキューする方法
00:14
About the Instructor
Yusuke Kohno
4.2 Average rating
13 Reviews
119 Students
2 Courses
WEB制作全般(デザイン・フロント/バックエンドエンジニアリング、CMS構築)建築ビジュアライゼーシ

建築士・設計関連システム構築・3DCG技師を経て、現在はWEB制作全般(デザインはもちろんですが、特にフロント・バックエンジニアリング、CMS構築)および建築ビジュアライゼーションを専門としております。
 対応システム・ソフトウェアはWordpress, PHP(CakePHP,Codeigniter, fuelPHPetc), mySQL, js, jQuery, iOS(Objective-C), Adobe Photoshop, VectorWorks, SketchUp, AutoCAD, Cinema4D...etc