Posts Tagged ‘Wordpress’

[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専用のタグ(関数)を使っていきます。

[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
*/

動かすところから始める 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・次回予告

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

それではっ