プログラミング学習「WordPress」8.0ヶ月 (No.16)

初めまして、momoです。
ツイッター（@momokatusan）です。

プログラミング初心者が、在宅フリーランスを目指すブログです。

MacBookも初心者、WordPressも初心者、そしてプログラミングも初心者、全てが初心者ですがどこまでできるか試してみたいと思います。

8.0ヶ月経ったのでブログをアップします。

今までの学習報告はこちら↓

【最近の学習報告】↓

【過去の学習報告】↓

進捗報告（2020/5/16〜5/31）

実績

期間	2020/5/16〜5/31
時間（合計）：学習	7.5（151.0）
時間（合計）：補足	20.0（264.5）

今まで学習したプログラミング言語

• HTML・CSS
• javascript・jQuery
• PHP・MySQL
• ネットワーク・サーバー
• （WEBサービス）途中
• （PHPオブジェクト指向）未
• WordPress　←今ここ

振り返り

半月経つのは早いですね。

やっとWEBサービスのLesson9に戻ってきました。

やっぱり一からプログラミングコードを書かないと、どこがどこだかわからなくなるので、一からコードを書くことにしました。

そしてWEBサービスはまだ途中なのですが、急遽、ホームページ製作のお手伝いをすることになったので、先にWordPressを勉強してから、またWEBサービスに戻りたいと思います。

学んだこと

CSSを全て確認する方法

HTMLは開発ツール（F12）で確認できるのですが、CSSは選択箇所しか確認できなくて、何か方法があるか探したところ「W3C」というものを発見しました。

これでCSSを全て確認できるので便利ですね。

ずっと前から気になっていたことがわかった。

CSSのコードを一部ではなく一気に全て見る方法。

開発ツールでは一部だけしか表示出来なかったけれど、「W3C」を使えば全て表示される。

VS Code内で連携の設定もできるみたい✨https://t.co/RzIH7mPg7A

— もも🍑Webのわくわくさん (@momokatusan) May 16, 2020

やっとできた✨
MacでVS Codeの拡張機能「W3C Validation」を入れられた。JRE入れてそのパス調べて(optionキー押す)、VS Codeの「settings.json」にパス追記したらできた。ポイントはJREのインストールを画像上にしたらできた。違い不明。ただしファンの音が鳴るのなぜ😅https://t.co/kRuWCFlHew pic.twitter.com/dCBMHt3uCe

— もも🍑Webのわくわくさん (@momokatusan) May 17, 2020

ファイルフルパス確認

Macでファイルパスっていつもどこで探すのか迷ってしまうのですが「option」を使うことで簡単に確認できます。

【Macでファイルのパス名を探す方法】

ファイルで右クリック → optionキー → パス名をコピー

Macでファイルフルパスを簡単にコピーする方法 https://t.co/LzyxXKJtXs @D_Boxzさんから

— もも🍑Webのわくわくさん (@momokatusan) May 27, 2020

ファイル転送ツール

私はWordPressでファイルを転送する時に「FileZilla」を使っていますが「Cyberduck」や「Transmit5」がもっと便利なようです。

今度機会があれば使ってみたいと思います。

FileZilla → Cyberduck → Transmit5
が使いやすいみたい。
今度使おう✨

【初心者向け】Cyberduck（サイバーダック）の使い方 | TechAcademyマガジン https://t.co/VWGoty5YCl @techacademyより

— もも🍑Webのわくわくさん (@momokatusan) May 19, 2020

VS Code（ショートカットキー）

やっぱりショートカットキーを覚えて効率的にプログラミングコードを書く作業をしたいですよね。（時短に繋げたい）

これは日々使って慣れるしかないですね。

【VS Code（Mac）】
・cmd + shift + F（全ファイル検索）
・cmd + shift + J（絞込検索）
・ctl ＋ A（カーソル前）
・ctl ＋ E（カーソル後）
・opt + ↑↓（カーソル行↑↓移動）
・cmd + Enter（カーソル行↓行挿入）
・cmd + shift + Enter（カーソル行↑行挿入）
・cmd + shift ＋ K（行削除）

— もも🍑Webのわくわくさん (@momokatusan) May 21, 2020

【←↓↑↓】

キーボード日本語入力

・zh（←）
・zj（↓）
・zk（↑）
・zl（→）

いい覚え方ありませんか？

— もも🍑Webのわくわくさん (@momokatusan) May 21, 2020

デバック

PHPと言えばデバック。

変数に何が入っているか調べるには「var_dump」+「pre」が縦に並んでくれるので見やすいです。

またデバックとの戦い。。。

【デバックの方法（PHP）】

「var_dump」+「pre」は「print_r」より結果が見やすい

①「var_dump」縦
echo "<pre>";
var_dump($key);
echo "</pre>";

②「print_r」横
print_r($key);

・$str＝string型＝文字列型（文字数）
・$key＝email, pass, pass_re
・pre=preformatted text#ウェブカツ pic.twitter.com/UvvkWlrAk4

— もも🍑Webのわくわくさん (@momokatusan) May 24, 2020

Notion

必要な情報を管理するツールです。

情報が沢山で整理しきれない時に教えていただきました。

真っ白なページで自由にレイアウトできるので思っていた以上に便利です。

プログラミングコードを管理したいのなら「Boostnote」がお薦めのようです。

今度覚えていたら使ってみよう。

【Notion】

Notionを使ってみたよ✨
（必要な情報を管理できるツール）

daisukeさん(@daisuke80001)に教えていただき、これとっても便利☺️

そしてこちらの動画がとてもわかりやすい！

Notionの使い方徹底解説！Notionの魅力と基本的な使い方を解説【前編】 https://t.co/xQXUvabP8P @YouTubeより pic.twitter.com/s0knkUzgZ8

— もも🍑Webのわくわくさん (@momokatusan) May 29, 2020

アウトプット

商品詳細画面

WEBサービスの商品詳細画面。

クラス名があり過ぎてどこがどこだがわからなくなったので背景色をつけてみました。

出来上がってみたらデザインが。。。

気にしないでください。

今朝の問題点解決✨

1. ヘッダーとフッターの幅＝フッターのwidthコメントアウト（これちょっとよくわからない）
2. 画像サイズ違い＝元画像による
3. panel-title有無＝class名間違い

とりあえず次に進む🏃‍♀️ pic.twitter.com/bhwgHfhjcy

— もも🍑Webのわくわくさん (@momokatusan) May 20, 2020

ユーザー登録画面

これはまだMYSQLと関連付いていません。

また今度仕上げていきます。

【236日目】
今日: 0.0h ［補: 2.0h］
合計: 143.5h ［補:258.5.h］
WEBサ部 L9 復習

ユーザー登録の下地を作成したから明日はphpでDBと関数のコードを書く。ひたすらコードを書く。#ウェブカツ #ウェブカツ女性割引#フリーランス#プログラミング初心者#駆け出しエンジニアと繋がりた6 pic.twitter.com/LJCapJndDF

— もも🍑Webのわくわくさん (@momokatusan) May 22, 2020

WordPress　テーマ作成

WordPressのテーマ作成です。

WordPress独自のタグがあることを知りました。

まだ全部学習していませんがテーマの仕組みがわかって面白いです。

このブログもWordPressですが、事前に触っていて良かったなと思いました。

【242日目】
今日: 1.0h ［補: 0.0h］
合計: 145.0h ［補:264.5h］
WordPress部 L3

WPでテンプレート作成中。
index.php、style.css、screenshot.jpgがあればできる。
面白い✨#ウェブカツ #ウェブカツ女性割引#フリーランス#プログラミング初心者#駆け出しエンジニアと繋がりたい pic.twitter.com/OvvKZZaeFJ

— もも🍑Webのわくわくさん (@momokatusan) May 26, 2020

お役立ちサイト

お役立ちサイトはこちら→ フリーランス

便利機能（ショートカットキーなど）

ショートカットキーやパソコンの便利機能などをまとめました。

さいごに

この半月はエラーと戦っていた感じです。

次回はどのようなエラーと出会うかな。
（エラーは成長するチャンスっていうけれどできれば出会いたくないな）

そして2週間あればWordPressは終わるかな。

WEBサービスが気になるので早く戻りたいと思います。

おまけ

Mac

Macを購入するならどれがお薦めか投票で聞いてみました。

「Mac book pro 13インチ」がお薦めのようですね。

外に持ち出すことが多い人には良さそうですね。

プログラミングをやるのにMacのどれがお薦めですか？
基本は家ですが、外に持ち出すこともあるかな。それだとbookかな。
サイズはやっぱり大きい方が見やすいかな。

— もも🍑Webのわくわくさん (@momokatusan) May 18, 2020

Mac（PTA割引）

MacがPTA割引で買えるそうです。

PTAをされている時がお得に買うチャンスですね。

「Adobe CC」は残念ながらPTA割引はなさそうでした。

adobe ccを購入予定です。
PTA役員で割引購入できると聞きました。
購入された方います？

またMacもPTA役員割引があるらしい。

知らなかった👀https://t.co/69Ub4b27nc

— もも🍑Webのわくわくさん (@momokatusan) May 18, 2020

それではまた。

半月後にお会いしましょう。