![見出し画像](https://assets.st-note.com/production/uploads/images/90244422/rectangle_large_type_2_e460b8404f13be29a426a791cf14c736.png?width=1200)
実務で使った2年分のコーディング&WordPressメモまとめ集
※ 本商品はBrainで販売しているものと同じになり、Brainの方では販売開始から3時間で100部、半日で300部、そして3日で500部と自分でもびっくりする勢いで売れました👀
Brainの方では現在累計1,100部以上・レビューも現在630件以上頂いており、平均スコアも5.0と好評頂いています🙇♂️
また総合ランキング1位も獲得しました🥇
自己紹介🐶
初めまして、フリーランスコーダーのじゅんぺい(@junpei_sugiyama)と申します。
本noteの内容をご紹介する前に、簡単に自己紹介をさせて頂きます。
2022年11月現在40歳、約3年半前からWeb制作の勉強開始。
10ヶ月後に初案件、その1年後にタイに移住を決意、さらに7ヶ月後にタイに移住。
今はタイのバンコクに住み、フルリモートでコーディングやWordPress案件をこなしながら生活し、2年間で約80件ほど納品してきました。
「実務をなるべくコピペで済ませたいから」という不純な動機で始めたブログですが、今では440記事以上、PV数も右肩上がりで現在は月間14.9万PVほどになります。
また、Twitterで紹介して頂ける回数も増えてきました。
初案件WordPressサイト構築、投稿についても基本的な動きは完成。じゅんぺい様@junpei_sugiyamaのブログが神過ぎて参考にさせて頂き一瞬で終わりました✨圧倒的感謝です😭明日は体裁整えてサイト公開まで行けるかな?皆様本日もお疲れ様でした💤#駆け出しエンジニアとつながりたい
— じゅんや|Web制作ココナラ1位の医療従事者 (@matujun0707) March 9, 2021
今日はパソコンを触れずスマホで学習。
— よう@webディレクター (@yo_prog) June 19, 2021
・Udemy
・@junpei_sugiyama さんのブログ
じゅんぺいブログのWordPress連載は、今日初めて読みましたが説明が簡潔で大変わかりやすいです。
Udemy学習のおかげもあり、HTMLをWordPress化する流れがしっかり頭に入ってきます。
明日もやれることをやる🔥
自分の部署内のホームページにSwiper.jsを使おうと思ったけど、メインのブラウザがIE😱なのでslickを初めて使いました
— ばっと@ブログ×programing×英語でかけ算中 (@bat20190608) March 10, 2021
参考にしたのは@junpei_sugiyama さんのブログ
ほぼコピペで実装できました🙇♂️
SEOが苦手でブログ挫折したけど、こんな風に価値を提供できる記事が書けるようになりたい
そして現在では、
「コーディング ロードマップ」
「WordPress 学習 ロードマップ」
で、検索1位となっています。
![](https://assets.st-note.com/img/1667290851318-cpZ7dyWn5C.jpg?width=1200)
ブログでもたくさんコードをご紹介していますが、ブログにまだ書いてないけど良く使うコードなどをNotionにもまとめており、今回販売するのはコーディングとWordPressのオリジナルテーマ制作を中心としたコーディング&WordPressメモまとめ集となります。
基本的に実務で使った事があるものだけをまとめているので、ただのコード集ではなく、
「1人のコーダーがこの2年間の実務でどんな実装をしてきたのか」
が分かります。
販売しようと思った経緯
今から1年前、このようなツイートをして結構反響を頂きました。
【Notionでコード管理する時の項目】
— じゅんぺい🍁ブログ/コーダー in バンコク (@junpei_sugiyama) March 14, 2021
✅タイトル
✅画像
✅コード
✅参考サイトURL
左上を見ると分かりますが、この場合は複数ある見出しの中の1つになります
今回URLはありませんが、必要に応じて追記
コードは言語を分けて言語の種類を選択可能
コードはコピー出来るので、コピペ無双出来ます⚔️ pic.twitter.com/EZbBMzEZQ5
以前はBoost Noteというツールを使ってコードを管理をしていたのですが、全てNotionに移行してからはずっとNotionを使っています。
そしてこのNotionにまとめたコードのメモをある方に見せたら、
🐮「じゅんぺいさん、それ売れますよ」
🐶「マジですか」
というやり取りがあったのもちょうど1年前になります。
それから販売まで1年以上かかった理由は、
・自分が分かればOKという感じで人に見せられた物ではなかったから
・そしてボリュームが膨大すぎて整理するのがめんどk・・・
となります。
そして整理するのが大変過ぎるので目を背けていたのですが、2ヶ月前に恐る恐るこちらのツイートをした所、これまた結構な反響を頂きました。
今までNotionに書き溜めてきたコーディングやWordPressに関するメモ、販売するって言ったら買いたいって人いますかね?現時点では自分が分かればいいやって感じなので、販売するとしたらもっとまとめないといけないですが果てしなく面倒なので時間かかると思いますが。。。 pic.twitter.com/BQQ978nFAQ
— じゅんぺい🍁ブログ/コーダー in バンコク (@junpei_sugiyama) January 31, 2022
以前実装した物をまた何時間もググった経験ありませんか?
Web制作においてググるという行為は必須で、ググらない人は皆無だと思います。
しかし、以前実装した物をまたググるのは時間の無駄です。
とは言っても、簡単な物以外は覚えていられないと思います。
そこで多くの人は参考になったブログをブックマークしたり、実装したコードをまとめておき、次に同じ物が出てきたらすぐ実装出来るようにしています。
しかし今度は、
大量のブックマークから探すのがしんどい
という経験もあると思います。
もう「ブックマークから探すよりググった方が早いんじゃないか」と思うほど。
ググるのが大変な理由
なぜ同じ事をググるのが大変かというと、欲しい情報が見つかったブログでも、細かすぎて必要のない情報も沢山含まれているから。
というのが1つの理由になります。
もちろんブログの場合は「実装するコードだけ」では不親切なので、細かい解説や付随する情報があった方がいいですが、時には
コードだけ分かればいい
という事もあると思います。
しかし、逆に「情報が省略されていて参考にならない」という事も多々あります。
これらを解消するには、
✅ 自分が欲しい情報だけまとめたメモを作る
✅ 足りない情報を追加してコピペ出来るようにする
✅ そのメモをすぐ探せるように整理しておく
というのが必要になります。
もちろん他人のメモではなく自分でまとめたメモがベストですが、先ほどのツイートのリプにも、
![](https://assets.st-note.com/img/1667304795075-v59oJGxl9s.jpg?width=1200)
![](https://assets.st-note.com/img/1667304797016-iKVXhJ9XgS.jpg?width=1200)
![](https://assets.st-note.com/img/1667304801336-VbykyMTk3x.jpg?width=1200)
![](https://assets.st-note.com/img/1667304806581-lm2CR4CswY.jpg?width=1200)
![](https://assets.st-note.com/img/1667304809461-PsUeFHqG3p.jpg?width=1200)
と言ってくれる方が思いのほか多かったので「自分だけ分かればいいや」と思って書き溜めた2年分のメモを、他の人が見ても分かるように整理しました。
購入者のレビュー
Twitterでのレビューは以下の記事にまとめています。
本noteの内容について
それでは本題に入ります。
以下の3点について書いていきます。
① 本noteの対象者
② 活用方法
③ 注意点
本noteの対象者
このコーディング&WordPressメモまとめ集は、私と同様にコーディングやWordPressのオリジナルテーマ制作をしている方を対象としています。
なのでWordPressでもSnow monkeyなどの有料テーマでノーコード、ローコード中心に制作している人は存分に活用する事は出来ないかと思います。
またWordPressはオリジナルテーマ化をしたことが無く、カスタム投稿やカスタムタクソノミー、タームなどが全く分からない状態だと使い方が分からないと思うので、
「実務経験はあるけど何度も同じこと調べるのがしんどい」
「何となくは理解出来るけどもっと楽したい」
という方向けになっています。
極力コピペで済むようにまとめてありますが、使う場所と意味が分からないと活用出来ないので、ある程度は自分で考える必要はあります。
当然デザイン通りにするにはカスタマイズする必要もありますからね。
なので以下に該当する方にはおすすめしません。
・コーディングの勉強を始めたばかりの方
・WordPressオリジナルテーマ制作をする予定のない方
・コピペだけで何も考えず実装出来ると思っている方
ただ今はノーコード制作しかしていなくても、今後オリジナルテーマで制作をしたいと思っている方は役に立てられるかと思います。
また、見出しやボタン、アニメーションのサンプル集を見て「CSSだけでこんな事できるんだ!」と感動するかも知れませんが、
「実務ではほぼ使いません」
ポートフォリオなどで凝った装飾をしたい場合は参考になるかも知れませんが、実務で使うことはほぼありません。
なので実務ではまず使わないようなマニアックな実装はあまりなく、各セクション上から順に使う頻度が高い物を書いています。
なので、
😭 実務ではどういう実装をするのか分からなくて、いつまでも勉強が終われない。
🧐 頻出する実装を知りたい。
という方にもおすすめです。
内容の一部を書くと、
✅ コピペで使えるWordPressの各テンプレート
✅ 実務でよく使う見出し一覧
✅ 実務でよく使うテキストのhoverアニメーション
✅ 実務でよく使うボタン内の矢印9種類
✅ Contact Form 7の色々・・・
などなど、実務で役立つものが沢山あります。
活用方法
コードは「なるべく自分が楽できるように」をモットーにまとめているので、コピペで実装出来る物が多いです。
全部書くと長くなるものについては省略しているので、詳細はCodePenやブログでご確認下さい。
そして主な活用方法は以下の2つになるかと思います。
📝 参考になったコードを自分のNotionなどにまとめる
📝 コードのまとめ方自体を真似する
人によって使う物は全然違うと思うので、このメモまとめ集を参考に自分だけのメモを作っていきましょう!
注意点⚠️
このメモまとめ集はコーディングやWordPressを完全網羅!という物ではなく、あくまでも私個人が2年間の実務の中で実装したコードを集めた物になります。
なので、
「これ1つでコーディングとWordPressは完璧!」
という訳ではなく、
「実務で実際に使ったコードが知りたい」
という方が主な対象になります。
また、このメモまとめ集には私のブログで詳しく解説しているものもあります。
しかしブログには技術記事以外も結構あり、大量の記事から探すのが面倒だったり、
「説明はいらないからとりあえずコードを見たい」
という人も多いと思います。
先に結論を言って欲しいタイプですね(私もそうです)
特にWordPressに関しては、ブログには書いてないけど非常によく使うコードも多いです。
💻 トップページに新着一覧、カスタム投稿の新着一覧
→カテゴリーの指定方法、タームの指定方法
→PCでの表示数指定方法、SPでの表示数指定方法
💻 固定ページでページネーションを実装する方法
💻 ACF、SCFの出力方法
などなど。
なので、
・ブログにしか書いていない物
・Notionにしか書いていない物
・両方に書いている物
と混在しています。
なのでメモまとめ集を見て「ブログのリンク貼ってるだけじゃん」と思う方はご購入をお控え下さい(リンク貼ってるだけの項目もあります)
逆にいずれブログに書く項目もあると思いますが、その時に「ブログに書くなら買わなければ良かった」と思う方もご購入をお控え下さい。
ちなみに書きたい事が大型連休最終日の高速道路の如く渋滞しているので、書けるのはいつになるか分かりません。。。
またブログから探すより、実装するコードがまとまっているだけでも価値があると思います。
このメモまとめ集は「未完成」です
このコーディング&WordPressメモまとめ集は未完成です。
未完成というより、私がWeb制作をやめない限り随時増えていく予定です。
いつまでも完成しないサグラダ・ファミリアみたいな物です。
実はこの2年間で実装したものも全て載せられている訳ではないので、まだ整理し切れていない物も含め不定期に更新していきます。
もちろん一度購入すれば追加料金はかからないのでご安心ください。
購入する前の注意点⚠️
注意点がいくつかあります。
⚠️ 年に1回も使う機会がない項目も恐らくあります
⚠️ 何も考えずにコピペするだけでは活用出来ません
⚠️ ググればすぐ分かるものもあります
⚠️ 既にご自身でコードをまとめている方は不要かと思います
もう一度書きますが、これは「2年間の実務で実際に実装したことがあるコード」がほとんどで、使う頻度が高い物から順に書いています。
なので、使った事もないマニアックな実装は載せていません。
また、WordPressの項目は全て販売を決めた後に十分な動作確認をしていますが、メモ通りに書いたのに動作しなかったといった場合などのサポート対応はしていません。
もし上手く実装出来ない場合は、
・変なスペースが入っていないか
・パスが間違っていないか
・テンプレートファイル名が間違っていないか
などご確認下さい。
カンマ1つ抜けただけで動作しない所もあります。
CodePenがある物に関しては、もしうまく実装出来ない場合は、
・jQuery本体を読み込んでいない
・必要なプラグインを読み込んでいない
・スペルミス、閉じタグ抜け
などご確認下さい。
その辺をご理解頂いた上でのご購入をお願い致します🙇♂️
また販売部数によって少しずつ値上げするかも知れませんが、LPのコーディングが安くても3万円と考えればすぐ回収出来るはずです!
ここから先は
¥ 25,000
この記事が気に入ったらサポートをしてみませんか?