• このエントリーをはてなブックマークに追加

WEMIE第2回目のイベントを行いました。

今回は次回よりも少し踏み込んだ内容で、WordPressのテーマを0から作るというイベントとなりました。

主な流れ

  • 12:30~13:00
    • 会場の受付
    • 会場準備
    • テーブル・椅子の移動
    • 電源タップの準備
    • Wi-Fiの準備・確認
  • 13:00~13:15
    • 自己紹介
  • 13:15~15:00
    • インターネット・Webとは
    • Webサイトの作り方
    • WordPressとは・CMSとは
    • WordPressのテンプレート階層について
    • テーマ作成1
    • 一からテーマの作成
  • 15:00~15:30
    • 名刺交換
    • 雑談
  • 15:30
    • テーマ作成2
    • テーマの実際の処理部分
    • ifの処理
    • whileの処理
    • 記事タイトルの表示
    • 記事本文の表示
    • カテゴリーの表示
    • 記事一覧ページのレイアウト
  • 16:00~16:50
    • 石黒さんの作成したカレンダープラグインのフィードバック
  • 16:50
    • 現状復帰・片付け
  • 17:00
    • 退出

会場の準備

松阪公民館にて窓口で鍵を借りました。次に、延長コードを借りました。段取りが悪かったので、イベント中に借りに行くことに。
このあたりは反省としつつ、事前に借りておこうかと思います。やってみると、思っていたとおりに行かないことが多くて勉強になりますね。

そして、机と椅子ですが、最も小さい講座室4を借りました。そこのレイアウトは縦長の「ロ」の形になっているので、少人数に液晶画面を見せるときには、机を4つくらいにして、正方形型にするのが良さそうだったので、その形にしました。椅子は重ねて端へ。

電源タップは部屋の手前に2箇所×2、奥に2箇所×2。多少は自前で持ってきたほうがいいかもしれません。

同時にWi-Fiの確認もしました。電波は良くないみたいなので、安定したものを準備したほうがいいかもですね。

自己紹介から

自己紹介は自分から時計回りに行いました。自分から行くのはいいですが、緊張しますね。

テンプレートみたいにうまく説明できるように練習したほうがいいかもと思うことも。

明和町のWeb制作会社でコーダーとして働いています。デザイン/プロトデータをもとにWebサイトとして動くように組み立てる仕事。
WEMIEを一緒に立ち上げました。

Webとは・インターネットとは

文書と文書をつなぐことで、参照先のページに移動でき、文章を読み進めることができる。それらの集合体をより見やすく使いやすくしたものがサイト。

Webは基本的に、誰でもアクセスできるようになっていて、無償で利用できる。もちろん、鍵をかけたり料金を請求して有料コンテンツとして配信することも可能。

ページからページ、サイトからサイトへのリンクが繋がって、それぞれのページ・世界中のページに移動することができる。それがWebで、インターネット。

Webサイト・ページの作り方や仕組み・更新

Webサイトは公開されていてアクセスしたら見ることができる領域に、公開したいファイルやフォルダをサーバー側にコピー(アップロードまたは転送)して誰でも見ることができるようにすることで、見せること・配信することができる。

作業は本来自分のPC(作業用のローカルPC)からリモートであるサーバーにデータを移す。まずはそこから始まる。更新の際・削除の際も同じ。ただ、これを繰り返して作業するのは非効率である。
文書と文書をつなげるにはリンクを行う。文字や画像などにどこのページに移動できるかを設定できる。それを編集してアップロードして更新するのは手間。

WordPressとは・CMSとは

ページの見た目はほぼ同じ・文章や画像などが同じように並ぶのに同じようにリンクの設定をしたり、添削したあとに転送作業を行うのは非効率だ。ということ。そこで生まれたのがCMS。

静的なHTMLを作成して、更新していくサイトと比べて、多くのページを効率的に作成できる。ブラウザからアクセスしたり、アプリからアクセスできるため編集が効率的。カテゴリーなどを設定できるため、自動的に都合よくページをまとめたり、表現することができる。

名刺交換・会話・雑談

ここで、ブレイクタイム。30分ほど。名刺交換を行って、仕事のことなどをお話。

一からテーマの作成

テーマを作成していく。WordPressのテーマは最低限必要なものは以下のもの。

  • style.css
  • index.php
  • screenshot.png(.jpg)

の3ファイル。style.cssにはテーマの名称や説明などを記載できる。CSSのコメントとして記載する。index.phpはテンプレート階層の最終読み込みファイル。このファイルだけあれば、どのページに行ってもindex.phpと同じカタチのページが表示され、困ったエラーが表示されるといったことは少ない。

テンプレートファイルの作成

すでにWordPressは準備されている。オリジナルテーマの作成はまず、/wp-content/themes/テーマフォルダ(任意)/

に作成する。/wp-content/themes/wemie/フォルダならば、wemieを作成する。

index.phpとstyle.cssはテキストエディタでも編集できる。ということは、デザインをこらなければ、オリジナルのテーマを無料で作って、サイトも勉強さえすれば低料金(レンタルサーバー・ドメイン)で運営することができる。

さて、これを踏まえて、screenshot.png(.jpg)は無視するが、index.phpとstyle.cssをまず空っぽで用意する。

index.phpの編集はまず、ループ部分から。ifとwhileのセットをコピーしてくる。

0件の場合は処理しない&投稿の繰り返し部分

<?php
if (have_posts()) {
while (have_posts()) : the_post();
?>
繰り返し処理
<?php
endwhile;
} // if (have_posts())
?>

これで、繰り返しの処理ができる。

「繰り返し処理」が表示されるので、ここにタイトルの表示・本文の表示部分を記述する。

タイトル・本文の表示処理を加える

<?php
if (have_posts()) {
while (have_posts()) : the_post();
?>
<h2><?php the_title(); ?></h2>
<div class="entry-body"><?php the_content(); ?></div>
<?php
endwhile;
} // if (have_posts())
?>

これで、ひととおり記事の一覧を表示できる。投稿の詳細ページもタイトル・本文が表示できる。

さて、トップページと同じ見た目ならばこれで良いが、詳細ページの見た目・表示内容を変えたいときは、ファイルを分けたほうが良い。

というわけで、ここでWordPressのテーマの仕組み。

テンプレート階層

WordPressの根幹。この原理・考え方をわかっていないとカスタマイズはできない。

テンプレート階層で検索して勉強してください。

さて、テンプレート階層の簡単な仕組みでもいいので、理解できたところで、single.php(singular.phpでも可)を作ります。

single.phpは投稿の詳細ページ用のテンプレートファイルです。index.phpはトップページと一覧ページ表示用、詳細はsingle.phpが担います。

  • index.phpのページの上部に<h1>トップページ</h1>
  • single.phpのページ上部に<h1>記事詳細ページ</h1>

としてみました。すると、トップページはトップページと表示され、詳細は詳細ページと表示される。

ページによって違った見た目に変更することができたということをここで体験できる。

さて、次はレイアウト。

CSSに記述して簡単なレイアウト

記事一覧(トップページ)の元データは、左にサムネイル・右に見出しや本文などのテキストが入っている。左右に並べる必要がある。

左右に並べるには、

HTML

<div class="entry">
	<div class="thumb"></div>
	<div class="txt">
		<h2><?php the_title(); ?></h2>
		<div class="entry-body">
			<?php the_content(); ?>
		</div>
	</div>
</div>

CSS

img{
	max-width: 100%;
	height: auto;
}
.entry{
	display: flex;
	justify-content: space-between;
	
	width: 100%;
}
.entry .thumb{
	width: 30%;
}
.entry .txt{
	width: 60%;
}
.entry .txt a{
	color: #417505;
}

サムネイルを表示させるため、index.phpの中身を

<div class="entry">
	
	<div class="thumb">
		<?php if (has_post_thumbnail()) : ?>
			<?php the_post_thumbnail('full'); ?>
		<?php else : ?>
		<?php endif ; ?>
	</div>

	<div class="txt">
		<div class="date-cat">
			<div class="date"><?php the_time('Y年m月d日'); ?></div>
			<div class="cat"><?php the_category(', '); ?></div>
		</div>
		<h2><?php
		the_title();
		?></h2>
		<div class="txt-content">
			<?php
			the_content();
			?>
		</div>
	</div>

</div>

とします。そうすると、アイキャッチ画像が表示でき、日付・タイトルも表示されるようになります。

と、ここまでです。

石黒さんの作成したカレンダープラグインのフィードバック

石黒さんがWordPressに使えるプラグインのサンプルを作ってきてくれました。汎用的に利用できるカレンダープラグインなので、うまくいけば様々なサイトで利用してもらえるかも。

フィードバックや意見交換を行いました。

編集画面は使いやすく、うまく動いています。表示部分も見やすい。いくつかの改善点や意見が反映されたら、より組み込みやすいプラグインとなると思います。

開催した場所

松阪公民館:松阪ショッピングセンター マーム

退出

机・椅子を現状復帰しました。汚したときは、掃除などが必要みたいです。時間はきっかりです。17:00になったら退出しましょう。