Programing beginner by koala

【ド素人OK!】WordPressテーマを自作したので道のりをシェアするよ②「動画付き過保護説明」

☆テーマ自作の大まかな流れ、それぞれの回でやることをまとめています↓
【保存版】超初心者のためのWordPressテーマ自作方法!画像&動画付き「過保護解説」

前回はPHPを動かすための環境を整えるというところまででした。

今回は、早速ですがhtml/cssを使って、デザインしていきたいと思いますっ!

で、今回どんなテーマを作るかと言うと、こんなシンプルなものを作っていきます。

2カラムの本当にシンプルテーマです。まずはシンプルで簡単なテーマを作ってみて、Wordpress自作の大まかな流れを体験し、だいたいの構造が分かったところで、難しいデザインにも挑戦してみるといいんじゃないかなと思います(^^)

まぁ私もあまり難しいことは説明出来ないので、基礎の基礎をお付き合いいただければと思いますm(_ _)m

Contents

まずはhtmlとcssで上記のデザインを作ってみよう!

まずはhtmlとcssで上記のデザインを作ってみます。一応下記に、コードを用意しましたが、もしよろしければ、黄色い部分だけコピペし、後は動画で一緒に作ってみませんか(^^)

コピペしてしまうと、なかなか頭に入りません。。やっぱり何かを学ぶ時は「行動」はセットです!

html、cssを打ち込むまでやっても、20分くらいですので、是非お付き合いくださいm(_ _)m

html/cssで作る際の注意点その①

子要素に関しては、クラス名やID名を細かく付けない方がよいです。Wordpressにアップし、phpやらプラグインやら、いろいろなものを組み込むことで、Wordpressが新しいhtmlを自動生成してくれます。

その際に、クラス名が変わってしまうことが多々あります。

例えば、<ul class="list">とクラス名を付けたら、その下(子要素)にあるliタグは、.list liと指定するようにするといいかなと思います。

html/cssで作る際の注意点その②

後ほど、上記のように分割していくので、どこからどこまでがヘッダーで、どこからどこまでがメインエリアか、分かるようにコメントアウトを付けておくといいです。

html/cssで作る際の注意点その③

メニューバーやサイドバーなどのウィジェットエリア等、Wordpressの機能を使えそうなエリアも、細かくデザインしすぎなくてOKです!

私はメニューバーを、下層部分まで細かくデザインしましたが、wordpressの「メニュー」という機能を組み込むことで、それらがたった1行のphpコードと化しました( ゚Д゚)

ただ、htmlコードを書かないと、cssでデザインが出来ないので、メニューバーであれば、「メニュー1」「メニュー2」とか、適当に作っておけばOKです。

htmlのコードは下記の通りです。

imgタグの画像に関しては、ご自分の画像のファイル名に変更してください。

どんな画像でもOKですが、例えば画像がなかった時に「no image」というデフォルトのものが表示されると思うのですが、あんな感じのものを作っておくといいかなと思います。

画像はテーマフォルダの中にimgフォルダを作り、そこに保存しておいてください。

CSSは下記の通りです!

黄色い部分に関しては、必ず記述しなければなりません。これを書かないと、スタイルシートとして読み込んでもらえません。

実際は、もっとしっかり書かないといけないようですが、これくらいでオッケーです!

マニュアル通りにやりたいという方は、Wordpressの下記のページを参考にしてみてください。

テーマの作成

ちなみに「theme name」はここ(↑上記)に表示されるものになります。

次回までにやっておいて欲しいこと。

次回からは早速、PHPファイルの作成に移っていきます。ですので、前回の記事で説明した「環境」は整えておいてください。

また、Wordpressの固定ページを2つ(なんならタイトルだけでOK)、個別ページを4つ(テキトーでOK)作成しておいてください。

まとめっ!

実際にhtmlファイルをリロードしてみて、トップにご紹介したようなデザインになっていればOKです!!

ここまでは、html、cssの知識があれば、そこまで難しくないかなと思いますが、次回から若干ハードルが上がるかもです。

がんばっていきましょう!

人気記事【保存版】超初心者のためのサイトの組み立て方!画像&動画付き「過保護説明」

About me

IT業界6年目にして、プログラミングの勉強を始めたkoalaです。

プログラミング用語が難しすぎる!ということで、初心者が初心者に解説するという型破りなブログを開設してみました。

専門用語少な目、分かりやすくをモットーにしています。

>>続きはこちら

今日の名言

クリックすると、あなたの心に響く誰かの名言が表示されます♪

 

今日の名言

 
※あなたの名言募集しています!詳細はこちら