ローカル開発環境でワードプレスオリジナルデザインを開発しよう2CSS設定編【HTML, CSS, JavaScript, PHP, WordPress初心者】
こんにちは。絶賛カナダで就活中のsgwです。今日は前回の続きでワードプレスでオリジナルテーマを作っていきす。今回はテーマでCSSを読み込む方法を記載していきます。
MAMPをデオフォルト設定してる場合は、http://localhost:8888 にアクセスするとMAMPのルートディレクトリ(MAMPで使ってるフォルダがある場所)に繋がります。http://localhost:8888/wp-admin/ もしくはhttp://localhost:8888/admin/へアクセスするとログインページに繋ぐことができるのでブックマークしておくと便利です。
目次
ワードプレスのテーマとは
上記のリンクのようにワードプレスにはいろいろテーマがあります。これをスクラッチから作って行くことが目的です。
デフォルトのままだと
Application>MAMP>htdocs>ワードプレス>wp-content>themes
となってると思います。その中にテーマフォルダを入れてワードプレス側でアクティベートすると自作したテーマが作れるというわけです。
早速テーマ作成はじめ
今回はsample_themeという名前で(フォルダを)作りました。
そしてこれをフォルダをドラッグアンドドロップか何かしらの方法でエディタで開きます。
そのフォルダ内に新しいファイルを作ります。名前を…
- index.php
- style.css
としてください。ワードプレスで名前を間違えると動かなくなることがあるのでフォルダ名は同じようにつけた方がいいと思います。
style.cssに記載するルール
下記のコードをcssに記載するとワードプレスがテーマと言うことを認識してくれます。
/*
Theme Name:
Theme URI:
Author:
Author URI:
Description:
Version:
License:
License URI:
Tags:
*/
- Theme Name – 名前
- Theme URI -githubとかテーマをダウンロードできる場所を書くことが出来ます。
- Author – 作成者の名前です
- Author URI – 作成者のホームページがあれば
- Description – どう言ったコンセプトなのかとか
- Version – バージョンでv1とかv2とか設定できます(適当でOK)
- Licenseどのライセンスなのか(詳しくないのでここは無視でもOK)
- License URI – ここも適当で..
- Tags – タグです。ここも適当で。
基本的に適当でって言ってるとこは全く無視してラベルを消し去ってしまっても問題ないです
index.phpに書き込む
index.phpに
<? php echo "こんにちは世界";
と書いて見ましょう。
echoとはブラウザでテキストを表示しろって命令です。ちなみにの中にコードを書くことを忘れずに。そしてブラウザに戻ってワードプレスのダッシュボードを開きます。するとなんと新しいテーマがあります。これを有効化して実際のページを見てみると…..
先ほどの文字が、表示されてます。そう、これでテーマを作る準備は終わりました。ついにこれからワードプレス関数(シンタックス)を使ってブログ名や記事たちを表示できたらなと思います。ってな訳で今日はこの辺で!!
Seee Yaaaaaa!!!!