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

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

IMG_0222

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

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

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

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

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

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

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

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

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

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

ss

申し訳ありません。

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

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

ss

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

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

d4eb3c7f5ff0a6d1db2486e253d6fabe_s

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

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

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

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

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

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

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

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

[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講座はひと月ほどおやすみします。
 申し訳ありません。

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

 短いですが、それではっ

謹賀新年、抱負と表明。

blogrenewal_2

あけましておめでとうございます。今年も、いえ今年から、またこのブログ更新を少しずつ頑張っていきたいと思います。

2016年の抱負 目標は小さく、コツコツと。

日々いろいろなことに手を出したくて頭でチャレンジする妄想をしては挫折してしまっている私ですが、今年は頭の中でパンクしそうになっているやりたいことリストの数々を少しずつ実現していきたいと思っています。
今までも紙に書き出してやろうと決意するまではできていたのですが、紙に書いた直後から挫折していました。

そこで、簡単に達成できる小さな目標をこまかーく設定することで、まずは1個でもやりたいことを成し遂げていきたいなと思います。あわせて注意することは以下の3点。

1.完璧を求めていないか

私が挫折する最たる理由がこれです。思い描いた理想のイメージと少しでもずれたら即終了。
目標設定が簡単に達成できるものかどうかを測る目安にしたいと思います。
イメージを紙に描きだして「こりゃちょっと今すぐには無理なんじゃないの?」って振り返ることができればきっと目標をもっと小さく設定することができるはず・・・。

2.何をするかを具体的に書く

達成できる目標を紙に書いていく際に、私はよく言葉を省略して書くクセがあります。
「スーパーでニンジンを2本買う」って書けばいいところを「ニンジン2本」とか省略しまくってみたりする。
パっとみて何をすればいいかわからない目標は見ても思い出すのに頭を使うので結局いつの間にかみなくなる。それでは紙に書きだした意味がない。というわけでカッコ悪くても一目で何をすればいいかわかるように書くようつとめます。

3.できなかったら、どうしたらできるか?を考える

やりたい!と思った時にやりたいことができないと私はこの世の終わりのような顔をするらしいです。
なぜそんな顔になっているのか、自分自身でも全くわからないのですが・・・。
できなかったらもうダメだ!って放り投げてしまうクセがあることは自覚しています。一旦リセットしよう!って気分になってしまうんです。また来世頑張ろう!ってなっちゃう。
そこを、ちょっと踏みとどまって、「この目標、こう変えれば達成できるかな・・・?」とか「もう少し細かい目標にしたら次は達成できるかな・・・?」と考えてみようと思います。

まずは1個。なんかやってみよう。

去年の末にはリニューアルできるって書いておきながら結局まだ何にもリニューアルできていないですが。
もっかい宣言して頑張ってみようとおもいます。

あと18日でブログをリニューアルしたい!!!!!!!!

言ったそばから目標設定がキツすぎないかって非難されそうですが。まぁ、まずは、やってみる。

 

もういくつねると

9

そういえば今日ってクリスマスイヴですね!!!
イルミーネーション・・・テレビでみればいいか・・・。

デザインのほうは亀進行で停滞気味です・・・。
記事部分のデザインがどうもハマるものができません・・・。

なので、実際にできてる部分をちょっとずつこのサイトに反映していこうかと思います。

なにもせず真っ白なままだとプレッシャーがかかる一方で・・・orz

わがままヘタレなせいで、きちんと更新してくれているゆうにはいつも申し訳なさでいっぱいです。
うおーがんばんなきゃー!

頭を抱えています

thumb1214

全然デザインがハマるものができません・・・

仕事も身が入らず・・・なんにも楽しくない・・・正直苦しいです。

今月でリニューアルできるんだろうか・・・頭がいたくなってきました・・・

もう少しだけ、がんばります。

1 2 3