へたれぽ

知識ゼロの素人がWordpressのオリジナルテーマを作るまでのお話

【DAY5】オリジナルテーマに作成者情報を加える

こんにちわ。へたれんです。

先日目標のオリジナルテーマ作成まで無事たどり着けましたが、残念がらWordPressがテーマと認識しただけの中身のないカタマリでした。今日は1歩前進させてテーマの作成者情報を加えてみたいと思います。

 

 

今日やること

・style.cssに作成者のテーマ情報を追加

・テーマのスクリーンショットを追加

 

よーし、今日も頑張るぞー٩( 'ω' )و 

 

style.cssに作成者のテーマ情報を追加 

まずはじめにstyle.css はテーマの「CSS スタイル」情報に加えて、コメントの形式で必ず「テーマ詳細」を記述する必要があります。

とりあえずは見た目から!と思っていたけど、結構重要な内容なんですね。確かにテーマの名前以外未記入のテンプレートなんて誰も使いたくないし、怪しすぎる。

必要な情報は以下になります。 

 

/*

Theme Name: テーマの名前
Theme URI: テーマアドレス
Author: 作成者
Author URI: 作成者アドレス
Description: テーマの説明
Version: バージョン
License: ライセンス
License URI: ライセンスのアドレス
Tags: タグ

*/ 

 

公式テーマでもなんでもないので好き放題に入力して良さそうですが、ライセンスのところは何を入力すればいいんだろう?他はなんとなく分かります。

特に重要なのはテーマタグのところですね。テーマ検索する時の特徴フィルターに合致させる必要があるみたい。まぁ…当分使うことは無さそうですが(^_^;)

 

/*

Theme Name: hetare
Theme URI: hetare.com 
Author: hetare
Author URI: -
Description: hetare? Oh! hetare! 
Version: 0.1
License: - 
License URI: - 
Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns

*/ 

 

ライセンスは保留にして、タグはTwentyThirtyから一部コピペしてみました。

さてさて、どうなるのかな。

 

f:id:ferret4plus:20170728033322p:plain

おぉ!それらしくなってきましたよ。

中身はスカスカですが表面だけは成長してきた( ´ ▽ ` )

ここまで来たらお隣のスクリーンショットも追加したいですね。

 

 

というワケで…

 

テーマのスクリーンショットを追加

screenshot.pngという名前の画像ファイルを、テーマフォルダの中に保存すると自動的にスクリーンショットが表示されます。

そんな簡単なことでいいんだ。

早速テキトーに画像ファイルを用意して…

 

f:id:ferret4plus:20170728034344p:plain

(´∀`)ふふふ

検索したら本当にありそうなテーマですね。

ちなみに、このスクリーンショットの推奨サイズは880×660。拡張子は上に記載がある通り.pngを使用してください。推奨なので他の拡張子でも使えるみたいですが。

 

次はそろそろ魔法(プログラミング)の出番かな( ´ ▽ ` )…

【DAY4】たった4日でWordPressオリジナルテーマ作成

こんにちわ。へたれんです。

昨日はWordPressのテーマ作りのハードルの高さに絶望して挫折しそうになりましたが、今日は気を取り直して基本魔法のHTMLをコツコツ勉強していきま…せん!!

WordPress Codexを眺めていたら僅か2つのファイルを用意すればオリジナルテーマを作成することができると判明。内容も簡単そう。

ボトムアップで勉強するのもありだけど、全体像を把握して取り掛かるのが好きな私としてはこちらを先に終わらせてみようかと思います。

 

今日やること

 

WordPressオリジナルテーマ作成

 

 

うん。ついにゴールだ。

今日で最終回になるのかな( ´ ▽ ` )? 

  

index.phpとstyle.cssの二つのファイルを用意する

index.phpとstyle.cssがどんな魔法書なのか知りませんが、空のファイルで構わないようです。これなら私にもできる!!

 

f:id:ferret4plus:20170727200825p:plain

よし、OK!!

 

 

テーマフォルダの中に保存する

まずは先ほどの二つのファイルを適当なフォルダに入れて、フォルダに名前をつける。このフォルダ名がWordPressのテーマ名になる。

おぉ〜これは慎重に命名しないと。

 

 

f:id:ferret4plus:20170727200844p:plain

 

hetare っと( ´ ▽ ` )

 

 

おしまい…?

え??これで終わり??

魔法書に書いてあるような不思議な呪文を何も使っていないよ。

 

そんなバカなはずは…

 

f:id:ferret4plus:20170727201545p:plain

うわわわわ

公式テーマTwenty系のお隣に私のテーマが(*´∇`*)

何もしていないけど凄い達成感。

 

 

f:id:ferret4plus:20170727201806p:plain

空のファイルなので当然テーマに関する情報は何もないです。プレビューしてみたけど、もちろん空っぽ。これでオリジナルテーマと言えるのか分かりませんが、最小構成で必要な情報は理解しました。

あとはこれに肉付けしていけば良さそうですね。

まずは↑の作成者情報に自分の名前を載せてみたいな(*'▽'*)

【DAY3】WordPressのオリジナルテーマを構成する魔法たち

f:id:ferret4plus:20170724120403p:plain

 

こんにちわ。へたれんです。

昨日ローカル環境でWordPressを動作させる準備が整ったので

本題のWordPressのオリジナルテーマを作ってしまおうかと思います。

 

今日やること

 

WordPressのオリジナルテーマ作成!!

 

 

 ゴールはもうすぐそこ??( ´ ▽ ` )フフ

 

と余裕かましてネットを調べていたら…

 

意味が全然分からない(^_^;)

 

WordPressという極大魔法を発動させるには

いくつかの辛い試練を突破しないとダメらしい。

昨日のLocal by Flywheelのセットアップは簡単だったのに…

 

 

ざっと調べたところこの4つの基本魔法が必要とのこと。

 

HTML

Webページの骨組みとなる魔法。

文字や画像などはこの魔法を使って表示されている。 

 

 

CSS

ブログのパーツの色やサイズを変更する魔法。

HTML経由で読み込まれる合体魔法。

 

個人的にいじってみたいのはこのCSSかな。

ブログを運営していたらよくあるテンプレートを使うだけじゃ物足りず、細かい部分を自分で調整したくなるんですよね。まぁ…分からないのですが。。

 

 

PHP

WordPressそのものがPHPで構成されている。

HTML・CSSをダイナミックに使う場合に使用する上級魔法。

 

これは…難しそう。

HTMLとCSSを学習してからですね。

今は見なかったことにしよう。

 

 

JavaScript

ページに動作をつける禁術。

 

初心者が使うと大事故につながりそうなので

PHPに引き続きこちらも保留しておこっと。

 

  

HTMLなら少しだけいじったことあるけど

文字を太くしたり、改行したり、画像を載せたりしただけ。

他は名前は見たことがあるけど当然知らない。

 

この中でもHTMLとCSSは重要な必須魔法とのこと。

うーん、これは一つ一つ学習していくしかないのかな。

他サイトだと簡単にサラッと流しているんだけど血と汗の結晶だったのね…

 

明日はWordPressに最低限必要なHTMLの勉強をしてみたいと思います。

今日やることはハードルが高すぎました(^_^;)

【DAY2】Local by Flywheelのセットアップ

こんにちわ。へたれんです。

昨日はLocal by Flywheelをインストールして満足し寝てしまいましたが、今日は初期設定を済ませて、なんとかWordPressが動作するところまで進めたいと思います。

初期設定をすっ飛ばしているワンランク上のサイトが結構多いので、そこを補完しながら進められるか不安ですがテキトーに頑張ってみる٩( 'ω' )و

 

今日やること

 

・Local by Flywheelのセットアップ

 

WordPressをローカル環境で動作させる

 

 

それでは昨日の続きからはじめます。 

 

 

Local by Flywheelのセットアップ

 

1.What's your site's name?

f:id:ferret4plus:20170724143823p:plain

 このブログと同じく「へたれぽ」に設定してみます。

 

 

 

f:id:ferret4plus:20170724143908p:plain

うっ… 

ドメイン名を変更してください的な言葉が。

あれ?どこにもそんな入力する場所は…

 

f:id:ferret4plus:20170724143926p:plain

あった!

ADVANCED OPTIONSの中に隠れていました。

Local site domainは「hetare.com」に

Local site pathはPCの適当なパスを指定。

 

で、Create site from Blueprint?

 

なにそれ美味しいの(@ ̄ρ ̄@)…

 

Useにしちゃえ!テキトー

 

 

2.Choose your environment

f:id:ferret4plus:20170724144010p:plain

 PHP?Web Server?MySQL

Customを選択すると見慣れぬ魔法の言葉がたくさん出てきたので、安全にPreferredを選びました。もう少し賢くなってからCustomに挑戦してみよう。

 

 

 

3.Setup WordPress

f:id:ferret4plus:20170724144157p:plain

あれ?

Setup WordPressってことはここでユーザ&パス設定して終わりなのかな。

テキトーにユーザ・パス・メール設定。マルチサイト設定はサブカテゴリーもサブドメインも使う予定はないのでNoを選択。

 

 

 

4.設定終了

f:id:ferret4plus:20170724144702p:plain

設定完了!!

めっちゃ簡単じゃん。

これなら昨日寝る前に終わらせておけば良かった。 

 

左下の+ボタンから追加でサイトが作れるので

今後色々と実験することができそう。

 

右上のVIEW SITEをクリックすると…

 

 

f:id:ferret4plus:20170724144736p:plain

おぉ〜!今年のTwentyなんちゃらのテーマですね。

公式テーマって使いやすそうで使いにくいから私は一度も使ったことがありません。基本海外テーマってオシャレだけど、日本人向けじゃない気がする。

 

 

f:id:ferret4plus:20170724144744p:plain

これで下準備が整いました。

あとはお勉強しながらオリジナルテーマを作っていきたいと思います。

 

あっ、、WordPress日本語化しなきゃ( ´ ▽ ` ;) 

【DAY1】Wordpressテーマの開発環境を作る 〜Local by Flywheel インストール〜

うーん…色々とネットや本を眺めているけど

Wordpressのオリジナルテーマを作るにあたり、根本的に作れたとしても動作させる環境がないことに気付きました。これはどうにかしないと! 

サーバーレンタルしてもいいんだけど、練習のためだけに借りるのもなんだか勿体無い。ドメインも作らなきゃいけないので面倒。運用中のブログに適用するのは危険なので無理…

ある程度形になったら用意する予定ですが、ローカルでも開発環境が構築できるみたいなのでまずはそちらで試してお勉強してみたいと思います。

 よ〜し!初日はWordpressテーマの開発環境を作りだ٩( 'ω' )و

  

 

開発環境を選ぼう!

 

  • MAMP

  • VCCW

  • Wocker

  • Local by Flywheel

 

管理人の環境はMACなので上記の4つが対象でした。

もういきなり英語ばかりで頭が痛い。和風なのないのかな…

MAMPというのが一番メジャーでネットにも情報が転がっているけど、新しめなLocal by Flywheelは予備知識がなくても簡単に環境が構築できるアプリでオススメらしい。

 

うん。Local by Flywheel にしよう。

 

他のも見たけど別の工程で膨大に時間割かれそうで私には理解不能っぽい。

しんぷる is ベスト!難しいのはさよならグッバイです( ´ ▽ ` )

 

  

Local by Flywheel をダウンロード

f:id:ferret4plus:20170724135246p:plain

Local by Flywheel

 

 

f:id:ferret4plus:20170724135517p:plain

トップページのFREE DOWNLOADをクリック。

 

 

f:id:ferret4plus:20170724135603p:plain

必要な情報を入力して GET IT NOW! からダウンロード。

色々と項目があるけど、メールアドレスだけ入力すればOK!

ファイルサイズが500MB近くあるので空き容量には注意が必要。

 

 

 

Local by Flywheel をインストー

f:id:ferret4plus:20170724140720p:plain

インストール中、PCのアドミニストレーターパスを聞かれた。

必要なことなんだろうけど、大丈夫かな(@ ̄ρ ̄@)

 

 

f:id:ferret4plus:20170724141111p:plain

無事インストール終了。

本当に簡単に終わっちゃいましたね。

この先の設定がちんぷんかんぷんになりそうだけど…

 

よし。今日はこのへんでおやすみなさい。

また明日頑張ろう。次はWordpressのセットアップかな?

はじめに

 

はじめまして。へたれんです。

 

これまで別ブログでWordpressを利用して趣味ブログを作っていたけど同じテーマを数年にわたり使い続け飽き飽きしていたので心機一転、自分でオリジナルテーマを作ってみようかなと思っています。

 

当ブログはそのための備忘録として活用する予定です。

 

と言っても、IT関係の知識には全く疎いので実はちんぷんかんぷん( ´ ` ;)

ググってみると「3時間でオリジナルテーマ作成」「素人でも作れる」なんて甘い言葉のサイトがあるけど本当かな。私にもできるのかな。大丈夫?

 

いつもブログを書いているので文字入力に関しては苦はないけどカタカナ文字の専門用語が登場すると魔法使いにでもなったような気分になるので先は相当長いと思います。

 

Wordpress運用ができたのもサーバーレンタルしてから数ヶ月経ってからでしたし、何年経っても意味不明なことばかり。テーマとプラグインのインストールくらいしかしていないと思う。

 

先行き不安ですが、とりあえず目標は…

 

シンプルでもPCスマホの両方で動作するオリジナルテーマを作ること!

 

うん。これだ。

何年かかるか分からないけどコツコツ頑張っていこう٩( 'ω' )و