学科 CMS構築基礎⑥

前回の復習

ヘッダーやフッターなどの共通要素をWordPressテーマ（あるいはPHP）で作成することでメンテナンス性があがる。

本日の訓練内容

特殊文字・絵文字コード表 | HTML-CSS 入門講座 | 情報デザイン工房濱屋

...

A4.3 シンプルオリジナルテーマ作成

A4.3.1 事前準備

A4.3.2 テーマ作成

(1) テーマ作成の原型となるHTML/CSSの作成

(2) サムネイル画像（screenshot.png）の作成

サイズ 880 * 660px

(3) テーマ用フォルダの作成と必要ファイルのコピー

(4) テーマ情報（style.css）の作成

テーマ情報ファイルを作成する

/*
Theme Name: （テーマ名）
Description: （テーマの説明）
Author: （作成者名）
Version: 1.0.0
*/

(5) テーマ機能（functions.php）の作成

テーマの機能を定義するsetup用関数を定義する。
また、この関数を有効化するためにadd_action’after_setup_theme_simple_setup’);を使用してセットアップ時の呼び出し登録を行う。

(6) ページ共通ヘッダーテンプレート（header.php）の作成

<!doctype html>
<?php /* language_attributes() を使用して言語属性を取得します。 */ ?>
<html <?php language_attributes(); ?>>
<head>

WordPressは日本語以外にも対応しているためWordPressで設定している言語を取得する。

<?php /* bloginfo( 'charset' ) を使用して使用する文字コードを取得します。 */ ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />

<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">

<?php /* ファイルを指定する場合は、site_icon_url() を使用してサイトアイコンの URL を取得します。 */ ?>
<link href="<?php site_icon_url(); ?>" rel="icon">

<div class="header">
	<header class="container">
<?php /* is_singular() を使用して個別の投稿ページ（投稿や固定ページなど）かどうかをチェックします。 */ ?>
<?php /* home_url( '/' ) を使用して本サイトのホーム URL を取得します。 */ ?>
<?php /* get_bloginfo( 'name' ) を使用してサイトタイトルを取得します。 */ ?>
<?php if (is_singular()) { ?>
		<p class="h1"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></p>
<?php } else { ?>
		<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></h1>
<?php } ?>
<?php /* has_nav_menu( 'primary' ) を使用して指定したメニューが割り当てられているかチェックします。 */ ?>
<?php if ( has_nav_menu( 'primary' ) ) { ?>
		<nav>
<?php /* wp_nav_menu( ・・・ ) を使用してメニュー情報を取得（展開）します。 */ ?>
		<?php
		wp_nav_menu(
			array(
				'theme_location'  => 'primary',				// メニューの位置（初期値：なし）
				'menu_class'      => 'menu-wrapper',		// ul要素のクラス名（初期値：menu）
				'container'       => false,					// ul要素のラップ要素（初期値：div）
				'items_wrap'      => '<ul>%3$s</ul>',		// 編集型式（%1$s：menu_id、%2$s：menu_class、%3$s：リスト項目）
				'fallback_cb'     => false,					// メニューが存在しない場合のコールバック関数（初期値：wp_page_menu）
			)
		);
		?>
		</nav>
<?php } ?>
	</header>
</div>

(7) ページ共通フッターテンプレート（footer.php）の作成

元となるHTMLファイルから各ページで共通に使用するフッター部を切り出してfooter.phpを作成する。

<div class="footer">
	<footer class="container">
<?php /* date( 'Y' ) を使用して現在の年を取得します。 */ ?>
<?php /* get_bloginfo( 'name' ) ) を使用してサイトタイトルを取得します。 */ ?>
		<p><?php echo sprintf( '<small>&copy; %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
	</footer>
</div>

<?php /* /body タグの直前に wp_footer(); を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_footer(); ?>
</body>
</html>

(8) ページテンプレート（index.php）の作成

メモ

-本日のアジェンダ-

学科 CMS構築基礎⑥ | DEAUアカデミー WEBデザイナー養成科（短時間）A教室

1限目
学科 CMS構築基礎⑥
基本機能を保有したテーマの構造について

2限目
学科 CMS構築基礎⑥
基本機能を保有したテーマの実装について

3限目
学科 CMS構築基礎⑥
課題作成

4限目
学科 CMS構築基礎⑥
課題作成

5限目
学科 CMS構築基礎⑥
課題作成

本日のテーマ

基本機能を保有したテーマを理解しましょう。

WordPressテーマの基本機能とは

基本機能を持ったWorkPressテーマを作成するためには、以下の機能を実装する必要があります。

投稿一覧の表示
投稿ページの表示
固定ページの表示
メニューの表示

HTML・CSSからオリジナルテーマを作成

WordPressのオリジナルテーマを作成する手順を理解しましょう。

参考サイト

本日の課題

WordPressサイトに、本日学んだ内容を投稿ページにまとめてください。

第6回成績考査

第6回成績考査（11月12日）は、ポートフォリオとします。Web版ポートフォリオまたは紙版ポートフォリオを提出してください。また、11月14日にプレゼンテーション訓練として「就職活動の取り組み」というテーマでの発表会を予定しています。ポートフォリオの説明や就職活動状況などを発表して頂きます。