こんにちは、前回の記事中に
>あと、今までWordPressの無料テンプレートを使っていたんですが、遂に自作してみようかと。
>人が作ったテンプレートだとどうしても細かな癖などやりにくいなーと感じる部分があったので。
>さて、私にも作れるでしょうか・・いざ挑戦です!!
なんて書いたことをすでに後悔している私です…
いやもう率直に結論から申し上げますとハードルが高すぎました
PHPどころかHTMLとCSSの理解すら怪しい私は、なんかもうすっごいプログラミング言語っぽいものを見た時点で戦意喪失してしまいました。
HTMLとCSSで構成されたサイトの場合、極端な話、個々のタグごとにカット&ペーストしていけばある程度好きな形に変えることが出来る訳です。
後は横幅とか色とか”なんとなーく”差し替えたり継ぎ足したりしていけば好きなサイトが作れたわけです。
分からないタグは検索すれば出てきたし、知識がない人間でも出来たわけです。
が、WordPressの場合はそんな差し替えるとか継ぎ足すなんて行為のもっと前に大きな壁が待っていました。
WordPressの構成はパーツ化されたPHPを読み込んでHTMLとして吐き出しているらしいのです。
つまり、HTMLがHTMLとして存在していないんです
PCの知識に乏しい素人の発言なので、上級者の方は何言ってるんだこいつと思われるかもしれませんが、WordPressのデザインを弄ろうとして最初に思ったことはそれでした。
なぜそう思ったか。
WordPressをお使いの方は[外観]→[テーマ編集]とお進みください。
これはWordPressに最初から入っているテーマの一つ、Twenty Tenのコードです。
WordPressをお使いの方なら同じものが見られますよ。
サイドバーからheader.phpを選び、とりあえず見てみます。
なぜheader.phpを選んだかというと、
“header.phpっていうくらいだからHTMLのheaderになるコードが書かれているに違いない”
そう思ったからです。
安易ですが、どこのことが書いてあるか予想できた方がコードも理解出来るだろうと私なりに考えての選択でした。
<?php /** * The Header for our theme. * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Ten * @since Twenty Ten 1.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <title><?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged;書き出しの部分↑
初っ端から<?php~と書いてあってなんのこっちゃって感じですが、その下に
<!DOCTYPE html>って書いてあるじゃないですか!!
やっぱりheader.phpはHTMLのヘッダーにあたる部分のコードが書いてあるということで間違いなさそうだぞ!!
</title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' );
読み進めていけばいくほど <title>とか<link>とか知ってるコードが沢山あります。
<link rel="stylesheet" type="text/css" media="all" href="
そうそう、ここにCSSのリンクを貼ればスタイルシート読み込むんだよね!!
どれどれ、どのスタイルシートを読み込んでるのかな?
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
リンク先…にphp…だと…??
そりゃないよマージ―(誰?)
スタイルシートが分からなかったらHTMLが上手に書けないじゃない…
まぁいいわ、ヘッダーは置いておいて、次はメインコンテンツを探るわよ!!
やっぱり大切なものは先に頂かないとね!!
index.phpなんてメインっぽいファイルがあるじゃない!!
きっとここには大量にコードが書いてあるに違いないわよ!!
<div id="container"> <div id="content" role="main"> <?php /* Run the loop to output the posts. * If you want to overload this in a child theme then include a file * called loop-index.php and that will be used instead. */ get_template_part( 'loop', 'index' ); ?> </div><!-- #content --> </div><!-- #container -->
短い!!
分かるコードが<div ~ だけなんてそんな…
だってこのブログにはタイトルリンクもあるしメニューバーもサイドバーもあるのに…なんで何一つとして書かれてないわけ?
私は一体何を弄ればいいわけ?
この時点で半切れです。今までのサイト作りと様子が違いすぎて、箸が上手く使えない2歳児並みに癇癪をおこしそうです。
でも20代の癇癪持ちは嫁にいけないともっぱらの噂ですからここはグッと堪えて考えます。
どうも
<?php /* Run the loop to output the posts. * If you want to overload this in a child theme then include a file * called loop-index.php and that will be used instead. */ get_template_part( 'loop', 'index' ); ?>
に全てが集約されているような気がしてなりません。
とりあえず前半の英文を翻訳してみます。(英語出来ないのでグーグル先生に助けてもらいました)
記事を出力するループを実行します。 あなたは、子テーマでこれをオーバーロードしたい場合は*その後のインクルードファイル *ループのindex.phpと呼ばれ、それが代わりに使用されます。
おお！なんか大切なキーワード一杯書いてあった!!
もしかしてもしかしなくても凄いことに気付いてしまったかもしれない。
<?php get_template_part( 'loop', 'index' ); ?>
この一文でブログに投稿した記事を呼び出すことが出来るみたいだ。
つまりこれは…index.phpっていかにもトップページ風なファイル名をしているくせに、全然メインではなく、こいつも呼び出されるファイルの一つに過ぎないってこと…かもしれない(仮説の仮説の仮説くらいの自信だけど)
いや、おかしくないですか?
だって…だって…
メインインデックスのテンプレートって書いてあるよ!!??
騙された(かもしれない)…メインだっていうから期待値大で開いたのに、サブキャラだった(かもしれない)なんて…
ここまででなんとなーく分かったのは、例え形式がhtmlのようになっていたとしても、HTMLで完結しているものはなく、また至る所に<?php~があるせいで一体何を示しているのかがphpの知識がないと分からないってこと!!
つまりHTMLだけどHTMLじゃない!!
そう、大福といちご大福のように!!
(一見同じに見えるけど中身を見ると違うって言いたい)
デザインを多少いじくるだけであれば希望のレイアウトに近いテーマをインストールして、CSSを弄ればそれでいいと思います。
しかし配置を変えたり足すのは本体であるHTML部分(WordPressではphpファイルに分けられていますが)
つまりカスタムテーマを作るにはphpの知識が不可欠!!
自分の満足いくサイトを作るにはやはり勉強が必要なわけですな。
どうも噂ではWordPressデザインブック
現時点で最強のカスタマイズ本【書評】WordPressデザインブック - りくまろぐ
リンク先記事をを見た限りでは、自力で駄目だった時はこれを読めば何とかなりそうです。
(記事の著者さんはその前にも2冊WordPressを理解するために本を読んでおられますが)
が、まずは自力で理解してやろうじゃないか!!ということで、PHPのお勉強をしたいと思います。
PHPを理解すれば、WordPressだけではなく、自分が運営するショップのサイトにも応用できるのでは、というのもPHPを1から学びたい理由の一つです。
というわけで、前回の
>WordPressのテーマ自作します!!
という目標を1段階下げて
>PHP勉強します!!
に変更しようと思います。
やっとHTMLとCSSでなんとなーくサイトを構築できるようになったと思ったところだったのに、WEBの世界は奥が深くて凄いですね。
深部まで理解している技術者の方々は本当に心から尊敬します。
よし、頑張るぞー!!