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


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:19 | Leave a comment

出来上がりイメージ

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

wordpressの仕様だってしかり。

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

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

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

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

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

作成手順

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

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

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

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

基本構造

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

基本のHTML構造

 

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

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

HTML構造2

 

概要

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

 

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

出来上がりイメージ

 

今日はここまで。

もし、気に入っていただけたらシェアしていただけると嬉しいです♪ この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。

ブログの更新情報はこちらで配信中~
Feedlyで購読
follow us in feedly
更新をメールでお知らせ 配信: FeedBurner

sponsored


公開日:   〇年前のこの日、何してた?
Categories: Works | Tags: , , , , , | 閲覧数:19 | Leave a comment

著者 ねこもりや

どうぶつ占いは「コアラ」。ボーっとする時間が常に必要。”猫になりたい”とひたすら願う怠けもの。

My Photos

Leave a Reply

Required fields are marked *


CAPTCHA