wordpressオリジナルテーマ作成での注意点覚書。

出来上がりイメージ

良いにつけ悪いにつけ、移り変わりの激しいWEBの世界。

wordpressの仕様だってしかり。

ウカウカしてたら、とんでもないことになってしまう。

そこで、思い立って、wordpressのテーマを作成するときのアレコレをちゃんと記録しておこうと思う。

最終的に出来上がるテーマの概要

1.HTML5/CSS3での作成
2.レスポンシブデザインでスマホ、タブレット対応
3.アドセンスもレスポンシブ対応
4.カスタムヘッダー採用で製作者と編集者が別の場合にも対応
5.カスタム背景採用(上記カスタムヘッダー同様)
6.カスタムメニュー採用(上記カスタムヘッダー同様)
などなど・・・

やっていくうちに、まだ他にも出てきそうだけど、それはそれで。

作成手順

手順はとても有名なこちらのページを参考にされたらわかりやすいと思うのでここでは書かないつもり。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました(サンプルダウンロード)

躓きやすいことに絞って記録していきます。

あくまで、自分仕様( ̄∇+ ̄)vキラーン

基本構造

すごーく、大事なとこですよね、基本。 
とりあえず、これだけ書いただけでも”HTML”ファイルとして保存すればブラウザでWEBページとして認識されます。

基本のHTML構造

 

基本のHTML構造を作成してからwordpressのテーマとして出来あがるまでを記録していきます。

その他の要素を組み込んだHTML構造

HTML構造2

 

概要

サイドバーを二つ。
これは、モバイルでの閲覧時に、サイドバー1(赤)はメイン部分(青)の上に持ってくるため、あえて分ける。
その為、”サイドバー1”には、検索ボックスとかカテゴリとか、閲覧者にとってすぐあると便利なものを置くようにする。
モバイルでの閲覧時

 

トップページなどのアーカイブページ。
最新の一件は全文、その他は抜粋表示する。

出来上がりイメージ

 

今日はここまで。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA