Archive of ‘技術’ category

[PHP] テーマに必要なファイルの配置 ゼロから覚えるWordPressテーマ作成、第5回

IMG_0222

ゆうです。

前回から約3ヶ月程間が空いてしまいました。
本当に申し訳ないです。
気を取り直すこともなく、普通に前回の続きからやっていこうと思います。

今回は、ファイルの配置です。

  1. テーマの配置場所
  2. ファイルの作り方
  3. 必要なファイル
  4. 今回のまとめ



1・テーマの配置場所

 WordPressはテーマを作る際に決まった置き場所があります。WordPressをデプロイ(※)したディレクトリにwp-contentディレクトリがあるのですが、その下のthemesディレクトリの下です。
 ここに新しくディレクトリを作り、その中にファイルを入れていきます。
 参考としては下のような形になります。
ファイル・フォルダ構成

※ デプロイとは、サーバの必要な場所に必要なファイルを配置し、使用する準備をすることです。インストールと似たような意味で使われます。



2・ファイルの作り方

 テーマの配置場所で新しく作ったディレクトリに作成するファイルは、基本テキストファイルになります。テキストファイルは、Windowsのメモ帳などで作ることのできるファイルのことです。アスキーファイルと呼ばれることもあります。
 この際、一つ注意点があるのですが、「文字コード」に気を付けてください。

 文字コードとは? となるかもしれませんが、今はそういうものがあり気を付けないといけないという事だけ覚えておいてください。後ほど(次回・ヘッダー作成で)詳しく解説します。



3・必要なファイル

 必要になるファイルが

  • index.php
  • funcitons.php
  • style.css

 の3つのファイルになります。このうち、style.css には先日の記事のようにコメントを書くと管理画面にいろいろ情報が表示されてうれしいです。
 functions.php ファイルは、今はまだ空で大丈夫です。
 最後に、index.php に下記内容を書いてみてください

<!DOCTYPE html>
<html lang='ja'>
    <head>
        <title>test</title>
    </head>
    <body>
        <p>test</p>
    </body>
</html>

 最後にテーマを選択から今回作ったテーマを選択すると、トップページに下のような画面が表示されれると思います。
test_sample
 やりました! オリジナルテーマの作成、第一歩が完了です!(画像はテーマ変更のライブビューで見ているので、画面真ん中にグルグル回っているアイコンや、左下にメニュー開閉の矢印がありますが…)



4・今回のまとめ

 今回で、テーマ作成の大枠が完了しました。ね? 簡単だったでしょ?
 とはいえ、まだ、index.php に普通のHTMLを書いたに過ぎません。
 次回は、ヘッダーをより細かく作っていく作業と、それに伴いWordPress専用のタグ(関数)を使っていきます。

長期間更新サボってしまいました

ss

申し訳ありません。

もっちゃんがデザイン終わったのに
まだ構築が終わってません(もっちゃんごめーんっ)

一旦終わったところのSSを貼っておきます。

ss

技術的なことについてはまた後日。
(Wordpressの翻訳ファイルに付いては来週にさせてください。すいませんっ)

[WordPress] 著作情報など、コメントの書き方

IMG_0222

先週少し予告したように、今週はWordPressのコメントの書き方を解説します。

  1. 決まり事
  2. Name 種類
  3. サンプル


 

1・決まり事

テーマにつける style.css (配置場所は後日解説)には幾つかの情報が付与できます。その際、コメントはファイルの先頭に記載し且つ1行1ヘッダとして記載する。
必ず Name と Value を記載する。Name は情報の種類、Valueは情報の内容を表している。


Theme Name: tsumori


 

2・Name 種類

記述できる情報には下記の種類がある

No. Name 内容
1 Author 作者
2 Author URI 作者Webサイト
3 Description テーマ説明
4 License テーマのライセンス
5 License URI ライセンスのURI
6 Status 調べてみたが、詳細不明
7 Tags タグ(検索用)
8 Template 調べてみたが、詳細不明
9 Theme Name テーマ名
10 Theme URI テーマホームページ
11 Text Domain 翻訳用ドメイン名
12 Version テーマバージョン

どこの情報が画面上のどこに対応するかは写真に記載した。
また、status, template については詳細が不明だったが、特に定義しなくても問題はないようだ。

WordPress公式テーマディレクトリ
2016-01-27_2314432

WordPress管理画面
2016-01-27_2314262
Text Domain についてはかなり特殊で、翻訳ファイルとの突合せのために使用する。
それだけで1記事書けるぐらいのボリュームはあるので、来週は翻訳ファイルについて書こうと思う。

3・サンプル

最後に、今作ってるテーマのヘッダのサンプル(2016.01.27現在)を置いて終わろうと思う。

/*
Theme Name:		つもり
Description:	つもりブログテーマ
Version:		0.0.1
Author:			Sakamoto Maya, Iwai Yusuke
Author URI:		http://tsumori.egoism.jp/
Theme URI:		http://tsumori.egoism.jp/
License:		GPL
License URI:	http://www.gnu.org/licenses/gpl.html
Tags:			flexible-header
*/

[jQuery]錯視

IMG_0222

 サイトリニューアル後のデザインではメインビジュアルにパララクスエフェクトを使うことになりましたので、実装しました。
 デモページとソースコード貼っておきます。

 簡単ですが、本日の更新は以上です。
 次週は製作者情報など、WordPressテーマのコメントの書き方についての解説になりそうですが、予定は未定です。
 それではっ

 デモページ

 ソースコード
jQuery

jQuery.fn.extend({
	background_parallax : function(sp) {
		var parallax_obj = $(this);
		var scroll_par = sp;
		if(!sp) { scroll_par = 10; }
		$(window).scroll(function(){
			background_move();
		});

		function background_move() {
			var scroll_top = $(window).scrollTop();
			parallax_obj.css('background-position', '0px -' + (scroll_top / scroll_par) + 'px');
		}
		
	},
});

 HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<script src="background-parallax.js"></script>

		<style>
			body {
				margin : 0;
				padding : 0;
				border : none 0px white;
			}

			div {
				width : 60%;
				margin : 100px auto 0 auto;

				line-height : 100px;
				text-align : center;

				color : white;
				font-weight : bold;

				background-color: rgba(0, 0, 96, 0.5);

				border : solid 2px white;
			}
		</style>
		<script>
			$(function(){
				$('body').background_parallax(5);
			});
		</script>
	</head>
	<body style='background-size:contain;background-attachment: fixed;background-repeat:no-repeat;background-image:url(background-image.jpg);'>
		<div>パララクスエフェクト</div>
		<div>背景が</div>
		<div>ゆっくり</div>
		<div>ついて</div>
		<div>きます</div>
		<div>よ</div>
	</body>
</html>

[PHP] PHPの基礎その2 ゼロから覚えるWordPressテーマ作成、第4回

IMG_0222

 ゆうです。
 第4回も前回に引き続きPHPの基礎をお勉強していきます。

  1. 判断命令「if」文
  2. 日常使う機会が少ない
  3. if文と比較演算子、組み合わせて行う「判断」
  4. 今回のまとめ



1・判断命令「if」文

 いよいよプログラム最後の機能「判断」についてお勉強です。
 これを覚えるとプログラムでできることがぐんと広がります。

 今までのプログラムは基本的に上から下、書かれていることを順番に処理していました(決められたことを決められた順番に実行していく。イベント等の「プログラム」と同じですね)。
 しかしこれだと、あまり複雑なことはできません。状況に応じて人間の判断が必要になってしまいます。

 例えば、入社式にて会社の今期目標発表後、会場の雰囲気が「納得しがたい。聞きたいことがある」となっていて、先に質疑応答に移ったほうがいいと思っても、それを判断し実行するためには人間が干渉しないとできません。

if文1

 これでは常に人間がいないとプログラムにお仕事をしてもらえなくなってしまいます。
 ここで出てくるのがプログラム自身に判断させる「if文」です。
 先ほどの図に「判断」の処理を追加した図が下のものです。

if文2

 緑色のひし形の部分が「if文」です。
 PHP の文法で書くと下のようになります。

if (判断内容) {
    判断内容が「真」の時実行される処理
} else {
    判断内容が「偽」の時実行される処理
}

 「真」とか「偽」とか今まで聞いたことない用語が出てきましたが、これについては次の「比較演算子」で説明します。



2・日常使う機会が少ない「比較演算子」

 少し脇道にそれて、比較演算子について説明していきます。
 比較演算子とは、その名前の通り値を比較するための演算子です。左辺と右辺を比較して式が成り立てば「真」を、成り立たなければ「偽」を返します。
 「真」は、正しいのニュアンスで受け取っておけばおおむね大丈夫です。PHP上では true で示されます。
 「偽」は、間違いのニュアンスで受け取っておけばおおむね大丈夫です。PHP上では false で示されます。

 比較演算子にはいくつか種類がありますが、一般的なものを挙げておきます。

==
右辺左辺が等しい
>
左辺が右辺より大きい
<
左辺が右辺より小さい
>=
左辺が右辺より大きいか等しい
<=
左辺が右辺より小さい等しい
!=
右辺と左辺が異なる

 ほかにも幾つかあるのですが、またの機会に解説します。

 また、これは正直プログラム慣れてる人もたま~にやってしまうのですが「代入演算子”=”」と「比較演算子”==”」は非常に似ているので間違えないでください!

 比較演算子の使い方について具体例を記述しますが、今回は変数の中身の確認に echo文や print文 ではなく、var_dump関数を使います。echoやprint文では true・false が出力できないからです。「関数」についてはしばらく後に解説予定ですので、今は「命令の一種」と覚えておいてください。

$answer = 1 == 1;
var_dump($answer);
$answer = 1 == 2;
var_dump($answer);
$answer = 1 < 2;
var_dump($answer);

2016-01-06_173020

 出力部分に bool(true) や bool(false) が出ていると思いますが括弧の外側が「型」で、内側が「値」です。ここでは $answer 変数に bool 型の true や false が格納されていることが確認できます。「型」についてもしばらく後に解説します。



3・if文と比較演算子、組み合わせて行う「判断」

 次回から WordPress のテーマ編集に戻るのでもう一息です。
 最後に if文 と比較演算子を使った判断の具体例を書きます。
 百聞は一見に如かず、下記の例を見てください。

if ( 1 == 2) {
    echo("同じ");
} else {
    echo("違う");
}

2016-01-06_174428

 変数に入れた値でもできます。

$answer = 1 + 2;
if ($answer == 3) {
    echo("同じ");
} else {
    echo("違う");
}

2016-01-06_174607

 このように、if文に「比較演算子」による「演算」を書くことでその計算結果に応じた処理をすることが可能になるのです。



4・今回のまとめ

 ちょっと今回のところは難しかったかもしれません。自分も説明文を書いてて「説明しづらいなぁ」と感じてました。もっちゃんと協議して次回以降もう少しわかりやすい説明を目指します。

 さて、ようやっとです。次回から WordPress のテーマ作成に移っていきたいと思います。
 まずはテーマ作成の方法「ファイルの作り方」から解説していきたいと思います。
 合わせて「PHPのコメントの書き方」なんてのも含みますので、こうご期待。

[PHP] PHPの基礎 ゼロから覚えるWordPressテーマ作成、第3回

IMG_0222

 ゆうです。
 第3回はPHPの基礎についてお勉強していきます。

  1. これだけは覚えて。出力命令「echo」文
  2. 値を入れておく箱「変数」
  3. 数学と一緒「算術演算子」
  4. 数学と違う!「代入演算子」
  5. 今回のまとめ



1・これだけは覚えて。出力命令「echo」文

 前回書いた次回予告と順番が違うじゃないか! とお叱りを受けるかもしれませんが、これだけはどうしても覚えてください。これが出来ないと組んだプログラムが「正しく動いているかわからない」のです。
 それじゃ、「echo」とは何なのか説明しますが、その前にプログラムは「入力・出力・記憶・演算・判断」の5つのことしか出来ないことを覚えていますか?
 「echo」はプログラムの中で「出力」に該当します。簡単に書くと画面に文字を出す命令です。

 もう少ししっかり説明すると、echo の右側に書かれた数値・文字列・変数を改行コードを末尾に付けて標準出力に出力する命令です。
 …なんか一気に用語が増えましたね。一つ一つ解説していきます。

命令

 コンピュータへの命令です。基本的に命令を右側の値に基づいて実行しろ、という形になります。

echo "Hellow PHP!";
include "test.php";

数値

 コンピュータ上で示す数字で表された値のことで、単に数値と言うと整数・小数・負の値など全てを含んだ値の事を指します。

文字列

 コンピュータ上で示す文字の集合体のことです(※)。文字列を表す場合は必ずシングルクォート(’)もしくはダブルクォート(”)で囲む必要があります。
 この2つは厳密には違いがあるのですが、それは後日改めて説明します。

'test';
"php";

 ※昔は「文字」と「文字列」は厳密に区別されていましたが、最近の言語では区別されていません。

変数

 次の項で詳しく解説してます

標準出力

 厳密には異なるのですが、標準出力は大体の場合において画面を指す為ここでは「画面」ということにしておきます。※
 ※プログラムが動作している環境に割り振られている標準的な出力のことなので環境によって異なる場合があるのです

改行コード

 テキストファイル等で改行に該当する「文字」の事です
 解説するとすごく長くなるので、一旦「そういうもの」として覚えておいてください

 それではいよいよ本格的にPHPのプログラムに入っていきます。



2・値を入れておく箱「変数」

 変数、それは数値や文字列等、データを入れておく箱のような物です。
 何故こんな曖昧な説明になるかというと、この変数という物はコンピュータの仕組みと密接に関わっているのでちゃんと説明すると意外と難解なのです。
 持てる知識の全てを動員して説明してみますが、厳密な定義なんていいよ! って人は「スキップ」をクリックして先にすすんでください。

 変数とは、メモリ番地に一時的に名前をつけたもので、1つの変数につき1byte~8byte程度メモリが確保される(文字列は配列と同様とみなす)。
 これにより変数名を使ってメモリに値を格納したりメモリから値を取り出したりすることが可能となる。
変数の仕組み



 勘の良い人は気づかれたかもしれませんが、この変数が「記憶」に該当する機能です。※
 この機能が無いとコンピュータは直前にやったことすら忘れてしまうので、うまく指示に従ってくれなくなります(具体的には直前の計算結果を忘れたりします)。変数のおかげで複雑な処理や計算が出来るわけですね。

 ※ハードディスクとかにファイルとして書き出す機能は「記憶」ではなく「出力」に該当します。この差はどこにあるかというと、プログラムの「記憶」とはプログラムが動作している時の「一時記憶」の事を指しています。プログラムが止まった後も残る「恒久的に記憶」することは「プログラム」の機能ではなく、ハードウェアの機能です。そのハードウェア(ハードディスク等外部記憶装置)に情報を書きだすのは「出力」、書きだした情報を読み取るのは「入力」になります。



3・数学と一緒「算術演算子」

 加減乗除の演算子です。通常と異なるのは乗算と除算の演算子で「×」は「*」に、「÷」は「/」になります。
 数学の計算と一緒で加算・減算より乗算・除算が優先され、左から順番に計算していきます。基本的に数学と同じなのでわかりやすいですね。
 ただし、プログラムの計算には注意点があります。それは除算の割る数を「0」にしてはいけないということです。エラーになってしまいます。※
※ PHP の場合、警告(Warning: Division by zero)が出ますが、処理自体は止まりません。



4・数学と違う!「代入演算子」

 また聞き慣れない「代入」という言葉が出てきましたね。数学ではxやyに値を与える事を指しましたが、プログラムでは変数に値を設定すること(※)です。
 面倒なのは数学では「等価」を表す「=」演算子を使うことです。
 数学での「=」は、左辺と右辺が等価で有ることを示しますが、プログラムの場合右辺の結果を左辺の変数に「代入」するという意味になります。
 ※変数の指すメモリ空間に値を記憶させることです

 具体的な例を書くと、こんな感じです。

$answer = 1 + 2;
echo $answer; // 3

2015-12-24_114655
paiza.io

 画面下に3が出力されていると思いますが、これは1行目の右辺「1 + 2」の結果を左辺「$answer」変数に「代入」し、その後変数「$answer」を画面に出力するという命令を順を追って実行したからです。

 代入演算子は、右辺で計算をさせる必要は特にないので、下のような事ができます

$test = "test";
echo $test; // test
$shiken = $test;
echo $shiken; // test

2015-12-24_114743

 右辺を値だけ(今回は文字列)にしても左辺の変数に代入されるし、右辺に変数を置いておくと変数の中身が左辺の変数に代入されます。



5・今回のまとめ

echo "出力に文字が出せるよ";
$test = "値が入れられるよ";
$x = 1; // 値が入れられるよ
$answer = $x + 5 * 10; // 計算出来るよ
echo $answer; // 51

2015-12-24_114815

 だいぶ長くなってしまったので今回はここまでにします。
 次回は今回できなかった「判断命令(if)、比較演算子」について解説します。これがわかるとプログラムが面白くなってきます。
 ちょっとWordPressと離れてしまってますがもおう少しお付き合いください。次々回ぐらいにはWordPressの解説に戻れてるはずですので…

[PHP] WordPress の「テーマ」とPHPの関係 ゼロから覚えるWordPressテーマ作成、第2回

IMG_0222

 ゆうです。
 第2回はWordPress の「テーマ」とPHPの関係について解説していきます。

  1. WordPressってよく聞くけど、何が出来るの?
  2. 「テーマ」ってなに?
  3. なんでPHPなの?
  4. ちょっとPHPの文法解説
  5. 今回のまとめ



1・WordPressってよく聞くけど、何が出来るの?

 Wordpress とはオープンソースのブログソフトウェアである(って、Wikipediaに書いて有る)。
 ブログソフトウェアは、ブログを取り扱うことの出来るソフトウェアの事で、オープンソースとは「誰でも好きに使っていいよ」っていう事です。文字通り好きに使えて「改造」したり「再配布」したりするのも基本的に自由です※。
 つまり、WordPressとは誰でも使えるブログを使う為のツールってことですね。
※ ライセンスによって微差があるので、詳細は調べてみてください。ただ、基本的にはこの考え方で大丈夫です。

 …しかし、WordPressはあくまでソフト。これを動かすサーバがないとブログ開設ができません。それに比べてAmebaブログやはてぶ等は無料で始められて、しかもサーバを自分で用意する必要がありません。なんか好きに使えても苦労が多そうですよね。

 それでも、WordPressにはそれらのブログサービスにはない強みがあります。それは高いカスタマイズ性。サーバごと提供されているサービスは、サーバに無用な負荷が掛からないようにカスタマイズ性が最低限に抑えられているものが殆ど。
 そんな中、WordPressはそれこそたくさんの事ができます。具体的に書き出してみましょう

  • テーマによる見た目のカスタマイズ
  • プラグインによる機能追加
  • 固定ページ作成

特に見た目のカスタマイズは、個性がなくなりがちなブログサイトにおいて強力な魅力の1つです。



2・「テーマ」ってなに?

 それでは具体的に「テーマ」についてほりさげていきます。
 前回、PHPはウェブページを作るHTMLの中に埋め込めるというお話をしましたが、「テーマ」はPHPの埋め込まれたHTMLファイルの塊です。
 ページのデザインをHTMLで行って、その中に決められたPHPのコードを書くことで、PHPの部分に記事等の内容が表示されるようになります。
 つまり、ページの見た目から記事の表示件数、文章の変換(語尾に「にゃ」を付ける等)等々、表示に関わる大部分は「テーマ」で制御されてます。



3・なんでPHPなの?

 WordPressは、本体のコードも全てPHPで書かれているのです。PHPはHTMLに埋め込むことが用意で且つ簡単な文法(※)の為、初心者にも扱いやすいのでPHPとHTMLのみを使ったWordPressのテーマは初心者でも簡単にカスタマイズ出来るようになってます。
 そのために、開発の言語をPHPにしたのではないかと考えられますね。

 ※ 近年のPHPは年々コードが複雑化しています

Untitled

 WordPressはこんな感じで回りとやり取りをしてます。
 図のコアとテーマの部分がPHPで作られてるんですね。
 「データベース」については後日改めて説明しますね。



4・ちょっとPHPの文法解説

 次回から、PHPの説明を行っていきますが、その前に簡単にPHPの文法について説明しておきますね。
 文法というのは、命令を書くときに必ずやらないといけない決まり事です。人間と異なりコンピュータ君は石頭なので曖昧な事が理解できないのです。決まり事通りに命令を書いてあげないと「わからないよっ」って怒られてしまうのです。これが「バグ」ってやつですね。
 バグについてはまた今度説明しますので、今回は文法の中からもっとも重要なものを2つほど紹介します。

行末にはセミコロン「;」

 PHPの行末には必ずセミコロンを置きます。コードを読み取るコンピュータ君が「ここで処理が一区切りなんだな」と判るようにするためです。具体例を書いてみるとこうなります。

print "Hello";
print "PHP!";

変数の先頭にはドルマーク「$」

 変数という謎の言葉が出てきてしまいましたね。一旦そういうものがある、ということだけ覚えてください。
 この変数というやつの先頭には必ずドルマークを書かないといけない決まりがあります。これもコードを読み取るコンピュータ君が「これは変数なんだな」と判るようにするためです。具体例を書いてみるとこうなります。

$s = "Hello PHP!";
print $s;



5・今回のまとめ

  • WordPressとは誰でも好きに使えるブログソフトウェア
  • WordPressのテーマはブログの見た目を決めてる
  • WordPressとWordPressのテーマはPHPで作られてる

 本日の解説はここまでです。
 次回は PHPの基礎「変数、算術演算子、代入演算子、出力命令(print,echo)、判断命令(if)、比較演算子」について解説します。
 なんか一気に用語がだだだだって出てきましたが、わかり易く丁寧に解説していくつもりなのでよろしくお願いします。

[PHP] PHPって何? ゼロから覚えるWordPressテーマ作成、第1回

IMG_0222

 ゆうです。すごく大仰なタイトルを付けてしまいました。
 以前から、Wordpressのプラグインを作ってみようとか、色々中途半端な記事を作ってみましたが、今回はそれらも巻き取って最後まで走りきりたいと思いますっ。

 前ふりはこれぐらいにして、第1回はWordpressを構築しているプログラム言語、PHPの事から始めたいと思います。
 できるだけわかりやすく、簡単に伝えられるようにがんばるぞっ

  1. プログラム言語って、何?
  2. プログラムって、何が出来るの?
  3. PHPって何?
  4. ちょっとPHPを使ってみよう
  5. 今回のまとめ



1・プログラム言語って、何?

 PHPは、プログラム言語です。それじゃあプログラム言語ってなんでしょう?
 「プログラム言語」って聞くとなんかすごく難しそうな印象を持つ人も多いと思います。
 が、実はそんな大したことはありません。
 まず、プログラムとは「手順」の事です。よく、イベントとかの進行表の事を「プログラム」と呼びますが、プログラム言語の「プログラム」と同じ意味です。決められた順番道理にやる「作業」や「内容」が記述された物のことですね。
 そしてプログラム言語は「手順」を書く際、コンピュータが手順を理解しやすくする為に作られた、コンピュータ用の言語の事を指します。C言語とかJava とか、どこかで聞いたことが有るかもしれませんね。
本棚



2・プログラムって、何が出来るの?

 プログラムってまるで魔法みたいに色々な事ができるって思ってる人が多いと思います。
 例えばGoogleやAmazonなど便利なサービス、ドラゴンクエストやファイナルファンタジーなどのビデオゲーム、果ては炊飯器やポットの温度調整などにも使われてます。
 しかし、プログラムが出来ることは、実はものすごく少なく、たった5つのことしか出来ません(※)。

 嘘ではありませんよ。

 プログラムは、入力・出力・記憶・演算・判断の5つのことしか出来ないんです。いや、本当に。
 でも、これだけなら誰でも出来るようになれる気がしませんか?

 いよいよ本日の本題、PHPの話に移ります。PHPもこれらプログラム言語の1つになるのです。

 ※ これは主に日本で使われている用法で、あまり一般的ではないので注意してください。ただ、わかりやすいので使わせてもらいました。



3・PHPって何?

 PHPとは、HTMLの中に組み込んで使えるサーバサイド・スクリプト言語です。

 ……すいません、これだと伝わらないですよね。

 まず、HTMLはHyper Text Markup Languageの略称で、直訳すれば「文字に印を付けられるすごい言語」です。
 これが、普段目にしているウェブサイトを形作ってます(このサイトもHTMLで作られてますよ)。
 段落ごとに文章をまとめたり、文字にリンクを貼ったりできるのは、全部HTMLのおかげです。
 そして、PHPというのは、このHTMLの中に直接書くことの出来るプログラム言語なのです。
 (サーバサイド・スクリプトについては、また機会をみて説明しますね)

 これを使うと、例えばアクセスカウンタのように見るたびに数値を変えたり、ページにアクセスした人が誕生日だったらお祝いのメッセージが出せたり、見るたびに表示が変わるようなウェブサイトが作れます。
 すごくないですか? これ、同じように文字を扱う媒体でも、雑誌や新聞じゃ絶対できないことですよ!



4・ちょっとPHPを使ってみよう

 ちょ~っとだけ先行して、PHPを使ってみましょう。
 repl.itさんで、ブラウザ上からPHPを実行できます。


repl.it

 repl.it さんの画面を開いたら左側に下の文章をコピーして Run▶ アイコンを押してみてください。

print("Hellow PHP!");

 print という「渡された文字列を出力する」という手順が実行され、渡された文字列「Hellow PHP!」が画面右側に出力されたと思います。
2015-12-08_231424

 入力・記憶・演算・判断については、今後テーマ作成時必要になり次第解説していきますね。



5・今回のまとめ

  • PHPとは、HTMLに組み込めるプログラム言語の事。
  • プログラム言語はコンピュータの為の手順書を書くための言語の事
  • PHPを含めたプログラム言語は入力・出力・記憶・演算・判断の5つのことしか出来ない。

 本日の解説はここまでです。
 次回は WordPress のテーマとPHPの関係について解説します。

 この講座は、Wordpressのテーマやプラグイン作成に必要になった知識をその都度解説していくので、学習順番があまり適切で無いかもしれませんが、生きた知識が身につけられるよう全力で頑張っていきますので、今後もよろしくお願いしますっ

動かすところから始める WordPress プラグイン作成

IMG_0222

随分前に書くと言っていて書かなかったプラグイン作成について記事を書きます。
ただし、前回書いたことはいったん無視します。
プラグインファイルを作ったり色々面倒くさくて
プラグインはファイルを個別に用意したりとか、設定画面を作ったり色々手間が多いので
まず動くものを作ってからプラグインに切り出すという手順でやって行きたいと思います。

作ってるものって、動いてくれないとなかなかモチベーション維持できないですよね。
ですので、まずは簡単に動かす事から始ます。

動くものを作り、リファクタし、テストでチェックをしてまた動くように作る。
TDD(テスト駆動開発)での作業を目指しますっ
※テスト環境がまだないのがいかんですね。作らねば。
tdd

(画像は和田卓人さんのスライドからお借りしました。
プログラマにはためになるスライドが多いのでぜひチェックしてみてください)


1・目的、目標から作業内容を決める

自分ももっちゃんもマジック:ザ・ギャザリングが好きで、よくデッキを弄って遊んでいて
いろいろな人に自分たちの作ったデッキを見てもらいたいと思うのですが
そのデッキをこのブログで掲載するのが面倒くさい。
具体的には見栄えを良く見せるためのタグ打ちが面倒くさい。
せっかくWordpressのようなブログツールを使ってるのだから
面倒なく、自動的に整形してもらいたいのに…
(タグ打ちは嫌でござる)

と、言うことで
decklist
上の画像(公式サイトから引用)のように見えるよう、
カード名と枚数を書くだけで、綺麗なリストを表示するように
タグを自動挿入するプラグインを作ってみようと思います。

今回は動くものを出来るだけ簡単に作るのが目標です。
ですので、出来るだけ作業を小さくします。
具体的には

・関数をひとつ作る
・作った関数を記事表示時にフック(後述)

以上2点に抑えます。

それではやっていきましょう。


2・関数を作成

それでは、まず関数を作っていきます。

function MtgList($the_content){
	return $result;
}

と、こんな感じで、名前を MtgListにして、引数でコンテンツの本文を受け取るようにして、
返り値に整形したコンテンツの本文を返すようにします。

このままだと、本文全体をリストとして整形してしまうので、特定のタグに括られた箇所だけ整形するようにしましょう。

function MtgList($the_content){
	return preg_replace_callback(
		'/\[MTG\](.+)\[\/MTG\]/s',
		function ($matches) { return $matches[1]; },
		$the_content
	);
}

preg_replace_callback 関数と、その引数の正規表現についてはそれぞれ資料を確認してください。

ざっくり解説すると、

第1引数で、どんな文字列を置換するか決定してます。
ここでは [MTG] ~ [/MTG] の文字列を検索しています。

第2引数で、置き換えの方法を決定。
(今のところ、[MTG] ~ [/MTG] の 「~」部分だけを出力するようにしています)

第3引数が、置換元の文字列です。

このままだと、ちゃんと置換されたかわかりづらいので該当箇所を赤い太字にしてみましょう。

function ($matches) { return '<p style="color:red;font-weight:bold;">' . $matches[1] . '</p>'; },

こんな感じですね。
これで、関数作りは完了です。


3・記事表示時にフック

次は、この関数を記事表示時に呼び出し、記事の内容を整形します。
それにはフックという機能を使います。
フックとは

何かの処理の前に処理を割り込ませる機構・機能

の事だと思ってくれて大丈夫です。
今回は

記事表示処理 の前に 先ほど作った関数(処理) を割り込ませます。

WordPress には、add_filter という関数で実装されています。

具体的には

add_filter('the_content', 'MtgList');

こんな感じで使います。

第1引数で、どのタイミングに割り込ませるか決めて
第2引数で、どの処理を割り込ませるか決定します。

上の例だと

記事表示(the_content)の前に MtgList 関数を呼び出すという処理を行い、
MtgListの第1引数に、コンテンツ本文の値が格納されます。


4・使ってみよう

これらのコードを早速使ってみましょう。
プラグインファイルを用意するのは、若干手間がかかるので、
今回は functions.php の中に追記します。

functions.php は 外観→テーマ編集→テーマのための関数(functions.php)にあります。

hoge

本来はサイトの見栄えをよくする為の関数を記述するところなのですが、
後日切り出すということで、今回は functions.php の末尾に追記します。

function MtgList($the_content){
	return preg_replace_callback(
		'/\[MTG\](.+)\[\/MTG\]/s',
		function ($matches) { return '<p style="color:red;font-weight:bold;">' . $matches[1] . '</p>'; },
		$the_content
	);
}

add_filter('the_content', 'MtgList');

さて、この状態で記事に下記文章を書いて表示すると…

[MTG]
3 沼
1 山
[/MTG]

3 沼
1 山

と、赤い太字で表示されます。

後は、4行目の処理を改良し
・行数分け
・枚数計算(土地・クリーチャー・その他・サイドボード)
・自動リンク
などを追加していけばOKです。


5・次回予告

来週は行数を分けて表示する機能を追加します。
改行コードでパースしてそれぞれにタグを付与するだけなので簡単だと思います。

それではっ

JavaScript でお手軽に値を保存する方法

ブラウザを閉じた時、更新した時、
折角入力したフォームの値が消えてしまうの、悲しいですよね。
ただ、入力した都度、Cookieに保存したり、サーバと通信したりなんてやりたくない。
そんな時は、localStorage を使って保存しよう。
そのまま使うと面倒くさいので、チョット手を入れました。

配列に、localStorage への保存メソッドを追加してます。
(既存クラスを汚すのでローカルで使うだけにしてね♪)

// 配列クラスにセーブメソッドを追加
Array.prototype.Save = function(savekey){
	// キーがない場合は何もしない
	if(savekey == undefined || savekey == null) return;
	// 配列をJsonに直して記憶
	localStorage.setItem(savekey,JSON.stringify(this));
};
// 配列クラスにロードメソッドを追加
Array.prototype.Load = function(loadkey){
	var buf  = localStorage.getItem(loadkey);
	// Json を配列に直して自身に格納
	var list = JSON.parse(buf);
	for(var key in list){
		this[key] = list[key];
	}
};
// 配列クラスにセーブ削除メソッドを追加
Array.prototype.SaveRemove = function(removekey){
	localStorage.removeItem(removekey);
};

で、使い方は

var hoge = [];

hoge[0] = 'よわむし!';
hoge.Save('rydia');

こんな感じ。

保存したデータを呼び出すときは

var piyo = [];
piyo.Load('rydia');

でできるよ。

1 2