第2回WordBench山口を開催しました

2016年5月21日に、2回目となるWordBench山口を開催しました!

13268338_1001426263268449_929861759556431854_o

やりました。第2回。

やりました。スピーカー。
はじめてのスピーカー、数日前から胃が痛くなり、前日にスライドを諦め、為せば成る!と挑みました〜。

ちょっとは成長できたかな…
自分でやりますと言ったのは、やる前からできないと言いたくなかったから。
何事も挑戦!このブログのタイトルもそういう思いがあります。

やってみたら、できるもんなんだよ!
(本当にできていたかどうかは、置いておいて…)

スライドを放棄したため、スライドを公開してもワケガワカラナイヨ〜なので
フォローアップブログ書きます。


スライドはこちら。

途中から放棄したので、実際に使ったのは自己紹介部分と必要なテンプレートファイルのところだけ(笑)
テンプレートファイルの図、頑張って作ったもん。

セッションで作ったテーマファイルは、必要な方にはお渡しします。
途中までですけど。

目次

  1. 自己紹介
  2. HTMLをWordPressテーマ化する
  3. header.php
  4. footer.php
  5. sidebar.php
  6. index.php
  7. テーマの適用
  8. カスタム投稿タイプでスライドを作る

1.自己紹介

ガロねえの由来を簡単に説明。
もともとゴールドが好きで、アクセサリーとかもシルバーよりゴールド…キラキラの金色が大好き。
要するに、お金が好きなんです。世の中金だ。金があれば幸せだ。(ないけど)

当日に言うの忘れていたけど、パチンコはしません。ギャンブラーじゃありません。


2.HTMLをWordPressテーマ化する

今回、もともとあるこちらのホームページの構造がものすごく気持ち悪いので、書き直したい!と思ってこの場を借りて制作させていただきました。

HTMLは事前に準備。WordPressもインストールして、固定ページ・投稿は事前に作成。必要なプラグインもインストール済みの状態!

さあ始めましょう〜で、WordPress化するために必要なテンプレートファイルはこんな感じ。

theme

わたしは、まず先に必要なファイルを空で一気に作ります。
そしてindex.htmlをheader.php、index.php、sidebar.php、footer.phpにそれぞれ分けます。
分けたらもうindex.htmlは用無し。さよなら。


3.header.php

そしてheader.phpから順番にWordPressのタグを入れていきます!

◆ wp_head()

header.phpに欠かせないもの!

<?php wp_head(); ?>

これをの直前に記述します。
これがないと、WordPressの機能が一部動かなかったり、プラグインが動作しなかったりします。
忘れないように一番最初に書きます!!

◆ titleタグ

次にの部分…
WordPressをインストールした時に設定した、「サイトタイトル」とページのタイトルをセパレーターも使って表示したい。

<title><?php wp_title('|',true,'right'); bloginfo('name'); ?></title>

このように書くと、下記のように出力されます。便利。

<title>ページタイトル | サイトタイトル</title>
2016.07.13追記
「wp_title」は今後、非推奨になる可能性があるとのことで、現在は「wp_get_document_title」を使うほうが良いそうです!すみません!

◆ テンプレートファイルまでのパス

CSSファイルやJSファイル、画像などの読み込み部分はHTMLでは相対パスで書いているけど、WordPressは実ファイルが存在しないので絶対パスで記述しないと読み込めません。
そこでタグを使って出力。

○ style.css

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

○ その他の読み込み部分(例えば画像)

<img src="<?php bloginfo('template_url'); ?>/images/site_id.gif" alt="" width="280" height="115" />

全てを置き換えちゃいます!

◆ URLの部分

ホームページへのリンクや、サイト内リンク部分は、下記のタグでホームページURLが取得できます。

<a href="<?php echo home_url(); ?>/">ホーム</a>
<a href="http://www.sample.com/">ホーム</a>

4.footer.php

header.phpが終わったらfooter.phpにうつります!(そう、簡単だから)

◆ wp_footer()

wp_headと同様に、footerにも絶対必要なタグがあります!

<?php wp_footer(); ?>

の直前に記述します。

後はheader.phpでしたのと同じように、画像ファイルやリンク部分を置き換えておしまい!!


5.sidebar.php

sidebar.phpも一緒!
今回は特別なことしてなかったので…
ウィジェットとか使う場合は、また別の機会に。。


6.index.php

いよいよindex.phpです。
index.phpには、今、index.htmlの中のheader部分、footer部分、sidebarを除いたものが入っています。
このままだと、ダメですね。
headerやfooterを呼び出してあげます!

index.phpの一番上に

<?php get_header(); ?>

一番下に

<?php get_footer(); ?>

該当箇所に

<?php get_sidebar(); ?>

はい。これだけでOK!

あとはNew Reports部分。投稿を最大5件、表示するというもの。
HTMLで記述してある投稿リストを1件だけにしてから、やししてスニペットに登録しておいたコレをulタグの後に挿入。

<?php
$newslist = new WP_Query( array(
	'posts_per_page' => 5
));
				
if($newslist->have_posts()):
while($newslist->have_posts()):
$newslist->the_post();
?>

ああ、あの日、「やし」という言葉を頻繁に使ったのですが、今考えてみると「やし」って山口弁ですよね。
県外の方、理解できてたのかな?みんな笑ってくれてた(愛想笑い)から大丈夫か…

※ちなみに「やし」=「ずる」「インチキ」です。

そしてulの閉じタグの前にif文やwhile文のendを記述。queryもリセットしておきます。

<?php
	endwhile;
	endif;
	wp_reset_postdata();
?>

あとは、投稿部分をタグに置き換え。

◆ 日付

<?php the_time('Y.m.d'); ?>

◆ タイトル

<?php the_title(); ?>

◆ 投稿へのリンク

<?php the_permalink(); ?>

◆ アイキャッチ画像

<?php the_post_thumbnail(); ?>

アイキャッチ画像を使う場合は、functions.phpに以下を記述しないと使えません!

<?php
	//アイキャッチ有効化
	add_theme_support('post-thumbnails');
?>

◆ 抜粋

こちらは本文の抜粋ではなくて、「抜粋」に記述したものが出力されます。

<?php the_excerpt(); ?>

7.テーマの適用

header.php、index.php、sidebar.php、footer.phpができたら、トップページが見れるので、とりあえず現段階でテーマファイルをアップロードします。

「WordPressのインストールディレクトリ/wp-content/themes/」の中にテーマディレクトリを作成し、その中にテンプレートファイルをぶっ込み!

WordPressの管理画面から「外観→テーマ」へ移動し、先ほどアップしたテーマを有効化します。
テーマ選択の際に出ているサムネイルは自動じゃなくて、screenshot.pngという画像ファイルを読み込んでいます。(テーマの中に準備してね)


8.カスタム投稿タイプでスライドを作る

カスタム投稿タイプとは、独自にカスタマイズできる投稿のことです。
企業サイトなどでは、商品の投稿や、スタッフ紹介、施工実績などに使われます。

今回はこのカスタム投稿タイプを使って、トップページのスライド部分を投稿形式にしようじゃないかという試み。
最近ではもう主流だと思いますけど、知らない方もいるみたいなので紹介します。

まずカスタム投稿タイプを作成するのに、プラグインを使います。
わたしは「Custom Post Type UI」というプラグインにお世話になってます〜。

mainvisualというスラッグのカスタム投稿タイプを作成して、おしまい。

次に、mainvisualの投稿の際に、「画像」「リンク先」があればいいので、カスタムフィールドを使って入力欄を作成します。

カスタムフィールドは「Advanced Custom Fields」というプラグインを使ってま〜す。
「mainvisual_img」「mainvisual_link」というカスタムフィールドを作成します。

あとはスライド部分のHTMLをWordPressのタグにしちゃいます!

<div class="mainvisual">
	<ul class="slider">
		<?php
			$newslist = new WP_Query( array(
				'posts_per_page' => -1,
				'post_type' => 'mainvisual'
			));
							
			if($newslist->have_posts()):
			while($newslist->have_posts()):
			$newslist->the_post();
		?>
    	<li><?php if(get_field('mainvisual_link')){ ?><a href="<?php the_field('mainvisual_link'); ?>"><?php } ?><img src="<?php the_field('mainvisual_img'); ?>" alt="<?php the_title(); ?>" width="920" height="300" /><?php if(get_field('mainvisual_link')){ ?></a><?php } ?></li>
    	<?php
			endwhile;
			endif;
			wp_reset_postdata();
		?>
	</ul>
</div>

これで、スライドが出なかったらどうしようかと思ったら出てくれてよかった。
拍手ありがとうございました(笑)

※the_field()、get_field()は、Advanced Custom Fieldsで使える関数です。


終始ぐだぐだしちゃいましたが、なんとか乗り越えた。
嫌でも時間は過ぎていくのですよ…

みなさんが、あたたかかったから、できたこと!
感謝感謝です!


まとめブログのまとめ

第2回WordBench山口(5月21日)振り返りレポート | WordBench
これであなたも脱初心者!第2回WordBench山口に参加してきました。 | ブログしなやんZ
第2回 WordBench山口に行ってきた – lesson me
PlusMK+ワークメモ: WordBench山口に参加してきました
第2回WordBench山口に参加しました – WebCake

第2回WordBench山口を開催しました」への2件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA