Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

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

f:id:sgwshu:20181206125723j:plain
こんにちは。絶賛カナダで就活中のsgwです。
今日は前回の続きでワードプレスでオリジナルテーマを作っていきます。

今回はとりあえずワードプレスのテーマについてとPHPを通してワードプレスで出来たウェブサイトに"こんにちは、世界を"表示させるってとこまで解説してみます。
復習として前回の記事はこちらです。
www.fran-shushoku.com
前回紹介したローカルホストのウェブページはMAMPを通さなくとも
http://localhost:8888
とウェブサイトのURLバーに入力するとMAMPでホストされたページに繋がります。
ちなみにダッシュボードへログインする方法は
サイトURL(MAMPローカル開発の場合だとhttp://localhost:8888) + /wp-admin/もしくは/admin/にアクセスするとログインページになるので前回作った簡単なユーザ名とパスワードを打ち込みます。

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

誰かが作ってくれたサイトデザインです。下のオフィシャルサイトからダウンロードできるし直接ワードプレスを通してダウンロードもできます。
ja.wordpress.org
このサイトからダウンロードしたテーマは解答してワードプレスのフォルダを開いて
f:id:sgwshu:20181206113656p:plain
wp-content>themes
の中にぶち込むだけですw

直接ワードプレスを通してダウンロードする方法は、
ワードプレスのダッシュボードから
外観>テーマ>新規追加
を押すとテーマが表示されるのでインストールクリックして有効化します。
が、しかし今回は自分のテーマを作ることが目的なのでこの最初の方法であるフォルダに直接ぶち込む方法でこの
wp-content>themes
内部に新しいフォルダを作ります。
今回はsample_themeという名前で作りました。
f:id:sgwshu:20181206115006p:plain
そしてこれをフォルダをドラッグアンドドロップか何かしらの方法でVScodeで開きます。
VScodeについては前回の記事を参照してください。
f:id:sgwshu:20181206122910p:plain
そのフォルダ内に新しいファイルを作ります。名前を...

  • index.php
  • style.css

としてください。ワードプレスで名前を間違えると動かなくなることがあるのでフォルダ名は同じようにつけた方がいいと思います。

CSSにテーマの情報を書き込む

これをコピペしてstyle.cssに貼り付けて貼り付けてください。

/*
Theme Name:
Theme URI: 
Author:
Author URI:
Description: 
Version: 
License: 
License URI: 
Tags: 
*/

こんな感じになります。
f:id:sgwshu:20181206123011p:plain
このコメントを書くことで勝手にワードプレスがこれはオリジナルテーマなんだな、ってことを認識してくれます。
基本的に名前さえ書いてしまえば他は空白でも問題ないです。

  • Theme Name-名前
  • Theme URI-githubとかテーマをダウンロードできる場所を書くことが出来ます。
  • Author-作成者の名前です
  • Author URI-作成者のホームページがあれば
  • Description-どう言ったコンセプトなのかとか
  • Version-バージョンでv1とかv2とか設定できます(適当でOK)
  • Licenseどのライセンスなのか(詳しくないのでここは無視でもOK)
  • License URI-ここも適当で..
  • Tagsタグです。ここも適当で。

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

ワードプレス+PHP

ワードプレス+PHPを使ってこんにちは、世界を表示してみましょう。
index.phpを開いて
f:id:sgwshu:20181206123216p:plain

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

と書いて見ましょう。

コード解説

echoとはブラウザでテキストを表示しろって命令です。ちなみにの中にコードを書くことを忘れずに。

そして
ブラウザに戻ってワードプレスのダッシュボードを開きます。
するとなんと新しいテーマがあります。
これを有効化して実際のページを見てみると.....
f:id:sgwshu:20181206123401p:plain
そう、これでテーマを作る準備は終わりました。ついにこれからワードプレス関数(シンタックス)を使ってブログ名や記事たちを表示できたらなと思います。
ってな訳で今日はこの辺で!!

Seee Yaaaaaa!!!!