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

翻訳についてはまた今度ということで

IMG_0222

翻訳ファイル自体はさら~っと話してしまうと

元となる po ファイルを編集し、 mo ファイルを出力して、これを WordPress に読み込ませると対応する言葉が翻訳されるという仕組みです。

原語:Boys be ambitious <=> 対語:少年よ大志を抱け

みたいな定義ができるのです。

とはいえ、一つ一つを丁寧に説明すると結構尺を使うことがわかりましたので、またいずれ…。

そうすると今度は今週書くことがなくなってしまうというジレンマ。
ぐぬぬ…

てなわけで、ちょっと個人的な予定を書いておきますね。

3/27 : フロントのHTMLをいったん目途をつける(細かなアニメーションなどはいったん後回しにして実装を先に行う)
3/31 : つもりブログにフロントのみ実装(その際に、多少なりとも違和感が残るとは思いますが…)
4/10 : 記事の整形

といったところでしょうか。
もっちゃんがいいデザインをしてくれたので、頑張りたいところです

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

ss

申し訳ありません。

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

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

ss

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

キンプリの応援上映がすごすぎて2月が終わってた

2016-03-07_193538

気が付いたら2月が終わっていました・・・。なんということだ・・・。

最近忙しすぎて昨日自分が何をしていたかさっぱり思い出せません。
とりあえずキンプリの応援上映を観たことだけはすっごく覚えてる。

キンプリ、正式には「KING OF PRISM by PrettyRhythm」というアニメーション映画なのですが、すごかった・・・本当すごかった・・・。

この映画、応援上映という特殊な鑑賞が楽しめます。
具体的に言うと上映中に光る棒を振って好きなキャラクターに呼びかけることができます。(だいぶ語弊あり

詳細はこの方のレポート記事が面白かったのでこちらをご参照いただければと思います。

ぶっつけ本番で応援上映に臨んだんですが、もうなんかわけもわからないまま熱風の竜巻に巻き込まれたような感じでした。同じく応援上映に来ていたエリートの方々の応援に圧倒されてばかり。

もう光る棒振るので精一杯・・・。すごいみんな息ピッタリ・・・。小粋な掛け声が面白い・・・もうどこをとっても楽しいしかない時間でした・・・。

全然中身のない感想なんですが、ホントもう「とりあえず見て!」としか言えない・・・。

まだ時間はある!ぜひ見に行ってください!見ればわかる!

超閃華に申し込みます。

eycatch160222

こんばんは、デザインが終わったので、ゆうが頑張ってこのサイトを新デザインで構築してくれているので、今度は更新を頑張ろうと思います。

現在、私は「超閃華の刻」というイベントに出るため、必死こいてサークルカットと本の表紙を描いています。ゲーム「刀剣乱舞」の同人イベントでございます。石切丸と青江の下ネタ全開のギャグ本を出す予定です。エロもあるよたぶん。

もう全然線が決まらずひぃひぃ言うとりますが、今回は絶対イベントに出たいのでなんとか頑張ります。モチベが切れないよう、がんばります~。

デザインおわったあああああああああああああ

d4eb3c7f5ff0a6d1db2486e253d6fabe_s

やっと!!!!やっっっっと!!!ブログの新デザインが決まりまして!!!!
ついに!!!!リニューアルすることに!!!!相成りました!!!!!!!!!

やったぁあああ!!できたあああああああ!!!!おわったあああああああ!!!!

おわったあああああああああああああああああああああああああああああああああ!!!!(うるさい

難産でした・・・ほんと・・・難産でした・・・。私の力不足なので仕方ないんですが・・・でもホント・・・・正直つらかったです。

共同管理者のゆうに何度「つらいならやめれば?」と言われたことか・・・。
それでも・・・それでも・・・!諦めきれなかったので・・・!デザインするのが・・・好きなので・・・!

これでやっとまたブログ更新を再開できそうです!
リニューアルの経緯とか詳しいことは、ゆうが実装してくれた後にまたあらためて記事にしようと思います!

とりあえず終わりました!今は開放感でいっぱい!賢者タイム!(違

やることは・・・まだ山積み・・・だけど・・orz

風邪引いてしまい作業停滞中です。

20160203_233119

 ちょっち体調を崩してしまって、なんの作業も出来てないので書くことがありません。

 だいぶ困ってしまった…

 なんとか来週には先週予告した翻訳ファイルについて書こうと思う。

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

サイトリニューアル準備

20160113_213830

 サイトリニューアル準備に時間を使いたいのでWordPress講座はひと月ほどおやすみします。
 申し訳ありません。

 代わりに来週以降はサイトリニューアルの進捗をご報告できていけたらと思います。

 短いですが、それではっ

1 2 3 6