プログラミング

ローカル開発環境でワードプレスオリジナルデザインを開発しよう2CSS設定編【HTML, CSS, JavaScript, PHP, WordPress初心者】

shu

こんにちは。絶賛カナダで就活中のsgwです。今日は前回の続きでワードプレスでオリジナルテーマを作っていきす。今回はテーマでCSSを読み込む方法を記載していきます。

MAMPをデオフォルト設定してる場合は、http://localhost:8888 にアクセスするとMAMPのルートディレクトリ(MAMPで使ってるフォルダがある場所)に繋がります。http://localhost:8888/wp-admin/ もしくはhttp://localhost:8888/admin/へアクセスするとログインページに繋ぐことができるのでブックマークしておくと便利です。

ワードプレスのテーマとは

上記のリンクのようにワードプレスにはいろいろテーマがあります。これをスクラッチから作って行くことが目的です。

f:id:sgwshu:20181206113656p:plain

デフォルトのままだと

Application>MAMP>htdocs>ワードプレス>wp-content>themes

となってると思います。その中にテーマフォルダを入れてワードプレス側でアクティベートすると自作したテーマが作れるというわけです。

早速テーマ作成はじめ

今回はsample_themeという名前で(フォルダを)作りました。

そしてこれをフォルダをドラッグアンドドロップか何かしらの方法でエディタで開きます。

そのフォルダ内に新しいファイルを作ります。名前を…

f:id:sgwshu:20181206115006p:plain
f:id:sgwshu:20181206122910p:plain
  • 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 – タグです。ここも適当で。

基本的に適当でって言ってるとこは全く無視してラベルを消し去ってしまっても問題ないです

f:id:sgwshu:20181206123011p:plain

index.phpに書き込む

index.phpに

<? php echo "こんにちは世界";

と書いて見ましょう。

f:id:sgwshu:20181206123216p:plain

echoとはブラウザでテキストを表示しろって命令です。ちなみにの中にコードを書くことを忘れずに。そしてブラウザに戻ってワードプレスのダッシュボードを開きます。するとなんと新しいテーマがあります。これを有効化して実際のページを見てみると…..

f:id:sgwshu:20181206123401p:plain

先ほどの文字が、表示されてます。そう、これでテーマを作る準備は終わりました。ついにこれからワードプレス関数(シンタックス)を使ってブログ名や記事たちを表示できたらなと思います。ってな訳で今日はこの辺で!!

Seee Yaaaaaa!!!!

ABOUT ME
sgw
sgw
フロントエンド
カナダのBCITとか言う短大卒業。その後4年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
記事URLをコピーしました