2018/07/23 (更新日: 2023/01/31)

【無料公開】ブロガー向けのプログラミング入門【学習期間は３ヶ月】

Blog LIFE

こんにちは、マナブです。
最近はブログを書きつつ生活していますが、元々はエンジニアでした。
» 参考：フリーランスエンジニアとして月収100万円を稼いだ方法【実体験】

先日に下記のTweetをしました。

思いつきですが、「ブロガー向けのプログラミング入門」みたいな記事って需要ありますかね？
目標設定は、「３ヶ月でWordPressで簡単なカスタマイズができるレベルを目指す」でして、クラウドソーシングを使えば、月５万くらいは稼げる技術力が身つく感じです。100ライクを越えたら、サクッと書きます

— マナブ@バンコク (@manabubannai) July 19, 2018

1,000ライクを越えまして、、、驚きました。

完璧な記事は書けませんが、わからない部分は質問を受け付けて、随時アップデートしていく記事を目指します。

本記事の想定読者

• WordPressでブログ運営をしている
• WordPress構築はできたけど、カスタマイズは一切わからない
• プログラミングは完全未経験でなにもわからない
• 今後はブログを頑張りつつ、サイトをカスタマイズしたい
• あわよくば、プログラミングで小遣いを稼ぎたい

本記事のコンセプト

元エンジニアの僕ですが、プログラミング学習を始めたキッカケは「ブログをカスタマイズしたかったから」です。 なので、この記事の読者さんと同じ境遇のはず。

最初の頃はいろいろと失敗をしまして、その理由は「答えだけを求めていたから」です。

例えば、「サイトのトップページにスライダーを入れたい」となったときに、[WordPress スライダー プラグイン]みたいな感じでググって入れてみるけど、「なんかデザインに違和感…。 しかし、修正方法がわからない…」という状態になる。

それをまた無理やりな方法とかで修正をすると、「あれ、、、サイトがなんかバグったんですけど…」となって、「仕方ないからプラグイン消すか…。」となって、結局は、なにもいじっていない状態に戻る、という感じ。 時間の無駄ですよね。

３ヶ月くらいで基礎を身に着けることで、「本質を理解した上でのWordPressカスタマイズができる状態」を目指します。

大半の人は「答えだけを知りたい」と考えていますが、答えだけをつまみ食いしていても上達しませんし、プラグインをボコボコ入れると、サイトがバグる原因になりやすいですし、SEO的にも悪影響が発生しやすいです。

たったの３ヶ月なので、すこし時間を割きつつ、本質理解を頑張りましょう。

※なお、言うまでもないですが、この記事の読者さんはブロガーです。つまり、学習過程を記事にすれば、そこからも収益を生み出せますよね(｀･ω･´)ゞ

もくじ

• １．WordPressカスタマイズに必要な基礎知識の学び方
• ２．WordPressのカスタマイズ例を実例付きで解説
• ３．WordPressカスタマイズでお小遣いを稼ぐ方法

だらだら解説するつもりはありません。
５分以内に読み終わります。 さて、はじめましょう。

１．WordPressカスタマイズに必要な基礎知識の学び方

必要な知識は次の３つです。

• その①：HTMLとCSSの基礎理解
• その②：WordPressの階層理解
• その③：検証ツールの使い方

これらを理解すると、「WordPressのカスタマイズ」ができるようになります。もちろんWordPressといっても奥が深いので、あくまで、基礎部分の理解にフォーカスしています。

①〜③を順番に解説してきますね。

※これを読んで「プログラミング楽しいな」と思ったら、別途ググりつつ、さらに学ぶのもありです。エンジニアというキャリアも拓けますよ。

その①：HTMLとCSSの基礎理解【学習期間の目安：２週間以内】

Webを理解するなら、HTMLとCSSは避けて通れません。
インターネットの基盤はHTMLで出来ておりますので、まじ必須知識です。

とはいえ、HTMLとCSSは「ざっくりの理解」で大丈夫です。
HTMLとCSSも、本気で学ぶと奥が深いのですが、WordPressの簡易カスタマイズなら、「基礎をサラっと知っているだけ」で十分ですので。

HTMLとCSSの学習方法（サラっと学習しましょう）

本記事は「なるべくお金をかけない方法」で解説してまして、ドットインストールの無料動画は、下記の３本でOKです。

注意点としては、思考停止しながら見ても意味なしです。
必ず、実際に手を動かしつつ動画をみること。 これが大切です。

なお、ドットインストールをみても、ちょっとわからないなぁ…みたいな感じなら、下記のYoutube動画もみておきましょう。

プログラミングが無料で学べる時代ですね、素晴らしい＼(^o^)／

その②：WordPressの階層理解【学習期間の目安：４週間以内】

WordPressの中身をすべて理解しようとすると、、、それだけで３ヶ月くらいはかかると思います。

今回の目的である「WordPressの簡単なカスタマイズができる」という状態を目指すなら、「WordPressの階層理解」に注力すべきです。

絶対に覚えるべきWordPressの”超”基礎知識

• トップページを編集したい場合 → index.php, home.phpを修正する
• 記事ページを編集したい場合 → single.phpを修正する
• 固定ページを編集したい場合 → page.phpを修正する
• デザインを編集したい場合 → style.cssを修正する
• その他の重要な概念 → get_template_part()は覚えるべき

超基礎だと、上記のとおりでして、大雑把な解説をすると「編集したいファイルが明確なら、そこにHTMLとCSSを書き込めばカスタマイズ可能」という感じです。

get_template_partはここで解説すると長くなるので、とりあえずは頭の片隅に置いておいてください。

WordPress基礎の学習方法

今回もドットインストールです。
なお、ドットインストールでWordPress学習をするときは、手を動かさなくてもいいかな、と思います。 下記の動画みつつ、頭で理解したらOKです。
» WordPress入門 (全23回) – プログラミングならドットインストール

その際に、「index.php, home.php, single.php, page.php, style.css, get_template_part」はしっかり理解するようにしてください。

WordPressにかなり詳しくなりたい場合

ドットインストールだけでも十分ですが、さらにレベルアップを目指したいなら、WordPressの教科書がおすすめ。

本書のチャプター２までがドットインストールで解説されている内容でして、チャプター３以降は、すこし難しいです。

しかし、本書をすべて理解したら、WordPressにかなり詳しい人になれますし、その知識はブログ運営でも、かならず役に立つはずです。

WordPressで躓いたらメッセージください

その③：検証ツールの使い方【学習期間の目安：２週間以内】

ここまで到達したあなたは、素人からすると「プログラミングに詳しい人」になれたと思います。

そして、この章では「検証ツール」を学んでいきます。

検証ツールとは、別名「ディベロッパーツール（開発者ツール）」でして、このツールを開きつつ、カフェで作業したら、、、あなたは「完全にエンジニア」です。

検証ツールの利用イメージ

ちょっと意味不明かもですが、上記の感じで「フォントサイズの修正」が可能です。
この方法を覚えたら、サイドバーの修正とか、トップページの修正とか、アドセンスの位置調整とかが可能になります。

検証ツールの学習方法

おすすめな記事は、下記の２本です。

上記をしっかり読み込めば、たぶん理解できるはず。
さらに深く理解したいなら、下記のドットインストールも見ておけばOKです。

ここまでを学び終えたら、準備は完了です。

あなたの状態としては、「HTML/CSS/WordPressがある程度わかっており、かつ、検証ツールの使い方もわかる」という状態なので、知識としては問題なし。

あとは、実際にサイトをカスタマイズしつつ、「実践を通して学ぶこと」が大切ですね。

学習面の解説は以上なのですが、実際に手を動かしてもらうイメージを掴むために、WordPressのカスタマイズ例を実例付きで解説していきますね。

２．WordPressのカスタマイズ例を実例付きで解説

実例は３つほど用意しました。

この記事を読んでいる方は、完全なプログラミング初心者なので、現時点だとイメージが湧きづらいかもです。

しかし、学習終了後には、確実に理解できるはずの内容なので、現時点でわからなくても「こんな感じなのか…」とイメージを掴んでいただけたらと思います。

• 実例①：トップページにバナーを入れたい場合
• 実例②：トップページに人気記事を並べたい場合
• 実例③：記事ページの日付表示を変更したい場合

順番にみていきましょう。

実例①：トップページにバナーを入れたい場合

りゅうさんのブログ（りゅうた学）を例に解説します。なお、使っているテーマは「JIN」という有名なテーマですね。

例えば上記画像の赤枠部分に、横長のバナーを入れたい場合。

検証ツールを開き、「編集したい部分の近くの要素名」を調べます。今回の例だと「<div class="pickup-contents-box animate">」となっていまして、この部分です。

そして、この要素の上にバナーのHTMLを記載すればOKでして、HTMLの書き方としては、次のような感じになります。

<a href=""><img src="images/bunner.jpg" class="top-bunner"></a>

こんな感じですね。
イメージ湧かないかもですが、WordPressのカスタマイズは基本的にこんな感じです。

実例②：トップページに人気記事を並べたい場合

次は僕のブログで解説します。
使っているテーマは「Minimal 」でして、ミニマリスト向けのシンプルテーマです。

今回はトップページの編集でして、左側の赤枠部分は、「<?php get_template_part( 'picks' ); ?>」になっています。

そして、「<?php get_template_part( 'picks' ); ?>」のファイルを開いてみると、上記の感じです。

うーむ、いまいち伝わりづらいかもですが、まぁこんな感じなんですよね。

こういった感じで、「修正したい場所の目星をつける→テーマファイルを開いてみる→コードを少し読む→修正方法がわかる」みたいな流れです。

実例③：記事ページの日付表示を変更したい場合

続いては、記事ページの「日付表示」を変更したい場合です。

日付部分を「検証ツール」で開いてみると、「<div class"cps-post-mata vcard">」とでておりまして、ここを直せばOK。 今回は記事ページの修正なので、編集するファイルは「single.php」ですね。

こんな感じですね。 ちょっと伝わりづらかったかもですが、WordPressの基礎を理解しておくと、ブログの修正が簡単になると思います。

また、これはTwitterからいただいた質問ですが、「プラグインなしでリンクカードみたいな表示をしたい」みたいなメッセージが届きましたが、これも、基礎を理解していれば簡単です。

例えばこんな感じで、リンクカード部分を検証して、そのHTMLとCSSを読みつつ、自分のサイトに適用すればOKです。

なお、この部分は、僕が自動化ツールも作っておりまして、参考までに下記をどうぞ。
» ShareHtmlを、もっと綺麗にしたメーカー

３．WordPressカスタマイズでお小遣いを稼ぐ方法

クラウドソーシングでも稼げますが（実例付きで、あとで解説します）、それよりも「ブログからお仕事を受注する」というのもありですよ。

ブログから仕事を受注する流れ

次のとおりです。

• 手順①：カスタマイズ方法を記事にする
• 手順②：カスタマイズ代行を記事で訴求する

当たり前すぎることですが、、、例えば「WordPressテーマであるJINの◯◯をカスタマイズしました」みたいな記事を書きつつ、「5,000円くらいでカスタマイズ代行しますよ」みたいなリンクを貼ればOKです。

ブログで稼ぐための具体例を見てみよう

参考になる記事を掲載しますね。

STORKのトップページカスタマイズ

【STORK】トップページにカテゴリー切り替えタブを導入する【カスタマイズ】

今回は「STORKのブログトップに、カテゴリー切り替えタブを実装する方法」を共有します。今回は、くまぺさん(@bearpe_)のカスタマイズ記事を参考に、一部改良してコードを書きました。 とてもわかりやすい方法でコードを書いてくれて感謝です。

有名なWordPressテーマである「STORK」のカスタマイズ記事ですね。
こういった情報を発信しつつ、「代行しますよ」と一言いれておけば、受注しやすいかなと。

WordPressの絞り込み検索カスタマイズ

WordPressって検索機能便利なんですが、自作で作るのは難しいんですよね。今回の記事では、「WordPressの絞り込み機能を追加したい。カスタム投稿、カスタムフィールドでも絞りこみがしたい。」といった疑問を解消します。

こちらは少し上級者向けですが、これくらいの記事がかけるようになると、大きめの受注もできるはず。

ここは少しオフレコな話ですが（本人から許可もらったので書いちゃいます笑）、この１記事で10万円の案件とかもきているみたいなので…。

「ブログ × プログラミングスキル ＝ とても稼げる」という方程式ですね(｀･ω･´)ゞ

クラウドソーシングでも稼げますよ

上記はランサーズ内で「WordPress カスタマイズ」で検索したらでてきました。

こんな感じで、細かい修正ができない人は、世の中に数多くいます。 こういった案件をこなしていけば、月５万円くらいは、余裕で稼げるかなと思います。

とはいえ、毎回毎回「ランサーズで検索する→提案する→受注する」とやっていたら、すこし大変なので、「受注を自動化」すると、さらに良いですね。

受注の自動化が、まさに先ほど話した「ブログ記事内で、カスタマイズ代行を受注しましょう」ということですが、その他にも「タイムチケット」とかは使えるかなと思います。

タイムチケット内で、「簡単なWordPressカスタマイズを5,000円で引き受けます」みたいな感じで売っておけば、月３〜５万くらい、いくんじゃないですかね。

なお、商品を売る際には「売れてる商品の解説文を真似する」というのがおすすめです。 

売れてる商品は売れやすい秘訣がありまして、その要素の１つが「商品説明文」ですので、タイムチケットで自分の商品を作りつつも、人気商品から盗める部分は盗んじゃいましょう。

というわけで、記事は以上です！
ここまで読んでいただき、ありがとうございました。

質問への回答コーナー

記事内でわからないことは、質問を受け付けます。 完璧な記事を書くことはできませんので、アップデートしていく記事を目指しております。
※質問はTwitterから受け付けますので、お気軽にDMください。

---

質問

パソコンのスペックはどれくらい必要ですか？

回答

ぶっちゃけ、パソコンのスペックは関係ないです。
おんぼろパソコンでもプログラミングは可能なので、そこまで気にしなくて大丈夫です。なお、おすすめのPCはMacbookProでして、その理由は「【完全初心者向け】プログラミング学習の始め方【３ヶ月で達成できる】」で解説しています。

---

質問

セキュリティに関してもちょっと記載お願いしたいです！
WordPressは未だに、ぶっちぎりでハッキング初心者講座の最初の例題になってますから。

回答

セキュリティは、難しいですね。
基本的な考え方として、「パスワードの使い回しはNG」でして、「人気じゃないプラグインは使わない」といったことを意識すべきだと思います。

とはいえ、狙われたら終わり的な事実もあるので（プロ集団に狙われたら、個人のWordPressサイトはハッキングされます）、個人的には、バックアップをしっかりとっておくこと、が大切かなと思います。
» 【とても簡単】WordPressのバックアップ方法【基本的に不要です】

---

質問

「クラウドソーシングでどんな仕事に応募すればいいか？」も解説希望します。

回答

基本的にはランサーズやクラウドワークスで、「WordPress カスタマイズ」といったキーワードでググればOKだと思います。

そして、この記事のとおりに学習していたら「案件をみたときに、作り方のイメージが湧く」という状態になると思うので、そういった案件を受注したらOKです。

Blog

• Tweet
• LINE
• Read Later