LINEで送る
Pocket
このエントリーをはてなブックマークに追加


前回は『Osclassのオリジナルテーマを作ってみよう!Part1 下準備編』を紹介し、大まかな下準備が整ったと思います。

今回は、『テーマの構造はどうなっているのか』を実際に作りながら解説していこうと思います。

尚、今回は前回の下準備が済んでいる前提でお話させていただきます。

スポンサーリンク




テーマの構造

HTMLでサイトを構築する際、以下の構造がテンプレートとなります。

これを、Osclassではファイル毎に分割・結合してコーディングしていくことで、構築を簡略化します。WordPressなどでも同じですね。

詳しく見てみましょう。

基本的なページの構造

Osclassの構造は、以下のようになっています。

トップページを見ると、ページが変わっても基本的に変化しない部分がheader.phpfooter.phpであり、トップページのメインコンテンツをmain.phpが司どっています。

さらに細かく見てみましょう。

header.php

header.phpには、ページのヘッダー部分を記述します。

メタ情報の記述やCSS、JSの読み込みを司どっている<head></head>、そして<body>から開始するヘッダー部分を記載します。

しかし、ページによっては使いたいJSやCSSなどが異なる場合があります。

そこで役に立つのが、common/head.phpです。

例えば、AというページとBというページで<head></head>部分が異なる場合、Aというページにcommon/head.php、Bというページにcommon/head-B.phpというように分けることが出来ます。

これにより、idやclassがどうしても重なってしまったり、必要ないCSSを除去したりと分けることが出来ます。

main.php

main.phpには、サイトトップページのメインコンテンツを記載します。

これにより、ページが遷移した場合、例えばログインページに遷移した際に、user-login.phpがmain.phpと交代します。header.phpとfooter.phpは、user-login.phpで結合すれば、変わらず使い続けることが出来るので、いちいち書き直す必要はありません。

footer.php

footer.phpには、その名の通りページのフッター部分を記載します。

ここで重要なのが、必ず最後に</body></html>を記述することです。

これにより、header.phpから開始したhtmlが、footer.phpまで読み込まれます。

また、サイトの高速化を図る為にfooter.phpにJSを記述すると更に良いサイトが出来上がるでしょう。

実際に作ってみよう

まずは、header.phpにHTML以下を記述します。

ここで出てきたosc_current_web_theme_pathの意味は、『現在使用しているテーマのパス』です。

(‘common/head.php’);は、結合するファイルの場所を示しています。

<head></head>内の部分をファイル分けすることで、より柔軟に、より綺麗にコーディングできます。

この関数は、テーマ制作の上でもトップクラスに入るほど重要ですので、覚えておきましょう。

それでは、次にcommon/head.phpをコーディングします。

次に、main.phpをコーディングしていきます。

osc_current_web_theme_path(‘○○.php’);で、header.phpとfooter.phpを結合します。

最後に、footer.phpを記述します。

ここで重要なのが、</body></html>を必ず記述することです。

HTMLでも、最後にこのように終わらせないと、表示が大きく崩れてしまいます。

さて、それでは実際にウェブブラウザで見てみましょう。

タブにタイトル、一番上にヘッダー部分、真ん中にmain.php、最後にfooter.phpが表示されていますね。

このように、HTMLを分割・結合することで、テーマ制作していくことが出来ます。

もちろんしなくても良いのですが、Osclassのシステムをフルで使う場合、ページ数が膨大になります。

工夫次第でさらに使いやすくなりますので、積極的に分割・結合しましょう。

今回の重要ワード

分割と結合でテーマを作っていこう!

osc_current_web_theme_path(”); は超重要!

次回は、CSSやJavaScriptの読み込み方法や適用方法を解説していきます。

次回もお楽しみに!

Osclassのオリジナルテーマを作ってみよう!Part3 CSSとJavascriptでデザイン編

テーマ制作、お任せください!

もしテーマを作るのが面倒、よくわからない、任せたい!とお悩みであれば、ぜひご依頼ください!

お問い合わせ、ご相談は以下までお願いします。

ご連絡お待ちしております。

Twitter: @gt_musix

Mail: クリックでメールを送信


スポンサーリンク