Wordpressカスタマイズ講座【テーマ作成編】
3.7 (152 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
888 students enrolled

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

デザイン・ファイルをWPテーマにコンバートし、完全オリジナルなWPサイトを制作しましょう!
3.7 (152 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
888 students enrolled
Created by Yusuke Kohno
Last updated 7/2019
Japanese
Current price: $20.99 Original price: $34.99 Discount: 40% off
23 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 2 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • html+cssで構成されたどのようなデザインでも、Wordpress化することが出来るようになります。
Requirements
  • htmlおよびcssの基礎知識
  • FTPによるファイルのアップ/ダウンロード
  • テキストエディタの基本操作
  • Wordpressの基本操作
Description

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

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

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

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

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

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

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

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

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

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

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

Who this course is for:
  • ・デザインとコーディングは出来るが、WPに組み込むノウハウを知りたい方。
  • ・Web関連の業務をされていて、受注の幅を広げたい方。
  • ・WPを導入してみたものの、気に入ったデザインのテーマが見つからない方。
  • ・WPのカスタマイズの総合力を身に付けたい
Course content
Expand all 20 lectures 01:48:04
+ 「デザインのテーマ化」制作実習
18 lectures 01:44:08


デザイン・ファイルの確認
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
テーマ作成の準備:エラー表示の設定
02:21

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

style.css

/*

Theme Name: テーマの名前**

Description:テーマの説明*

Theme URI: テーマの URL

Author: 作った人の名前*

Author URI: 作った人の URL

Version: バージョン

License: ライセンス

License URI: ライセンスの URL

*/

**必須項目

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

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

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

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

<?php

/*

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

*/

?>

その他のファイルの準備・TOPページの設定
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
【補足】スクリプト/スタイルシートをキューする方法
02:05