2000人企画!実際に実装してきた★
ここちゃ

やっほ!ここちゃです!

無料配布のスニペット集応募ありがとうございます!

先にご了承ください!!!

PCで見ることを前提にしてSPの時のことは気にして書きません

コピペでとりあえずは使えます。

が、スタイルなどわりかし適当にあたってるものもあります(jQueryがメインのものなど)

なので、考え方や実装の仕方をちょっと盗むくらいで自分好みにちゃんと変更していい感じに自分のも

のにしていってね★約束だよ★

脳死でコピペしても、その後何にもならないからね????脳死でも動くけど。

そして、今年1年をかけて全てのスニペットの集大成をちゃんとサイトとして作っていく予定でもあるので、お楽しみに★★

今回は一部を抜粋していきます★★

また今後このページはどんどん更新していきます!自分が実際に実装する中で調べたものや大変だったものなど、自分のメモ代わりとしても使っていくので現状が完成形ではありません。

更新したタイミングは常にツイッターで報告するねーーー!

今回の配布の想い

今回これを配布するにあたってたくさんの人からいろいろな声を頂きました。

たくさんの人からの楽しみ!という声や応援があってなんとか配布する形にまで作れました★

本当にありがとうございます!!!!!!

正直WEB制作に関して言えば経験もまだ全然で、ただのひよっこなので、こんなクソみたいなコードかいてんのか。ってもう何十年もやってるような強強な方には思われるかもしれない怖さもあります。

でも勉強開始して9ヶ月。案件受け始めて6ヶ月。この中で自分が苦戦しながら作ってきたもの。触れてきたものを最大限にここに出していけたらなって思ってます。だから今後もこのページは更新していきます★

⚠一生完成はしません。w

でも別にGIVEとか有益とかそんな大げさなものではありません。というより、もうこの感じやめません?って思ってます正直。

もっともっとみんながみんなの知恵をあわせて不得意をカバーし合いながらフリーランスって世界で生きていけばいいじゃん。って思うんだよね。

全ての人が0から始めて、一歩ずつ成長していってることだけは共通してて。

だから今回配布するものの中でもっとこうしたらいいよ。とかそれは違うんじゃない?とか全然言ってきてください★そして、こんなのできたんだけどここにのせてよ!っていうのもあったら全然送ってきてくれたらイイネ!!ってなったものはどんどんここに掲載していきます。

何かの縁で繋がったみんながみんなのスニペット出し合ったら最強のスニペットできると思うんだよね。そうやってうちは輪を広げていきたいなって思うし

得するとか損するとかそんなの抜きにして、これめっちゃ苦労してできたぜ!いえい!くらいのテンションで関わってきてくださいまし★

今後、そんな大型サイトを作成する予定でもあるので、そのときにもいろいろな人に協力をお願いする機会があると思うのでそうやって関わってきてくれた人たちと今後も何かを作っていきたいなって思っております\(^o^)/

とりあえず楽しも!ってこと()

1月にココナラでコーディングのみで約20案件受注して外注なしで納品完了までしました。

ここの部分に関してはしっかりまとめてまたリリースする予定なので、待っていて下さい★

ですが、なかなか簡単ではないことは確かです!

一日に使える時間ももちろんある。し、コーディングのスピードもめちゃめちゃ必須。

基本作業量常にマックス対応してきた10年間でしたが正直フリーランス人生で3本指に入るんじゃないかな?ってくらいココナラチャレンジ期間はしんどかったです!w

ただの負けず嫌いだけで乗り切りました★てへ

少しでもコーディング速度あげることで、見える世界は変わってくると信じて

このスニペット配ります\(^o^)/

そのときに実際に使ったコードから普段スニペット登録して使いまくっているコードからできる限りまとめたので、コーディングする時のちょっとしたお手伝いに使っていって下さい★★

しかし。先に言っときます。

見やすさは特に追求してません。というか、無理でした♥

まとめる行為がとっても苦手なのでwww

なので見づらいなーって人は、こうしたら見やすいと思う!って

アドバイスくれたら頑張ってなおします★★

そして、この期間でこれだけの知識や経験を積めたのも

デイトラで勉強開始し基礎部分を完全に網羅して完走し、ポジティブで出会ったみんなに助けられCodeUpsで更にコーディングの楽しさと知識を深くしてきたおかげです間違いなく★

ここちゃ

いつも関わってくれてるみんなありがとうございます!!!!!!!!!!!!

デイトラの記事も書いているので、ぜひデイトラ気になる人はこっちも読んでみて下さい!書いたときから更に内容がブラッシュアップされていて(特に上級コース)なので、少し現状の内容とずれてる部分もあるので、また一通り目を通しきったらちゃんと書き直そうと思ってます!

デイトラの公式はこちらから↓

ブログ内で気になるなーって言ってた部分は全部追加コンテンツとして追加されてるんじゃないかな?ってくらい大幅アップデートの前に書いた記事ですが忖度なしで素直に書いたので読んでみてね★

目次★

このサイトの使い方!

基本ベースはコピペして、貼り付けて実際に表示確認動作確認してから、CSSなりjsなりサイトに合わせていじっていってください!

他のブログのように詳細まで記載はしていません。

なので、なんでだ?って部分は自分で調べてみたら更に力はつくと思うよ\(^o^)/

コピペできるものを、最初からなぜか自分流で書き換えて動かない。。。

って言ってる人多い印象です。

が!!!! 全てそのままコピペしてまずはスタイルとか変更する前に動くこと確認して 、それから変更加えてみてね!変更加えた後に挙動がおかしくなったらそれは自分でいじったコードがおかしいだけなので、また元に戻ってやり直す。

そうやって動かない原因やできない原因を最小限に抑えて検証していくこともとっても大事だよ!

コピペそのまましたのに全く動かん!ってものがあったら、それはすぐにDMで教えて下さい!

デバックしきれてないものもあるので、そこはご了承くださいまし\(^o^)/

IEもフルシカトしてます!!!

それでは早速本題スニペット★

ブクマ必須!

めちゃめちゃいろんなサイトブクマしてますが。。。

その中でもコーディング始める時vscodeを開くのと同じように

毎回とりあえず開いているブクマをご紹介\(^o^)/

HTML5 入れ子チートシート
HTMLの入れ子ルール確認したい時はこれ一択★
Font-familyメーカー
凡庸的なフォントファミリーはここで調理★
CSS clip-path
クリップパスでトリッキーな形もばっちし★
CSS box-shadow
ふいに迷うボックスシャドークリックするだけでcssコピーできる神サイト
CSS三角形成ツール
三角作成ジェネレーター★必須
difff(デュフフ)
どこが違ってるかわからない時にコード貼り付けて比較する★
CSS STRIP GENERATOR
ストライプを作るジェネレーター★
OGP画像シュミレータ
納品前には欠かせないOGPタグ確認ツール
コーディング単位計算ツール
計算が苦手なここちゃのお友達★
CSS Gradient
グラデーションを直感的に作れる★
CSS Shapes and Icons Generator
矢印とかアイコンのcssでてくるお★
CSS3 Generator
直感的にこのサイトもたまに使える★暇な時触ってみると勉強になる★
OGP確認
SNSシェア時のOGP画像・タイトル・説明文のサイズ・見え方を確認

テストサーバー用意編

案件受け始めてからテストサーバー用意してもいいかもしれないけど、
早い段階から準備していろいろ触って失敗してってするべき★
おすすめサーバー貼っとくからぜひこの機会にサーバー契約して準備しとくべし!
お問合せフォーム実装なんかした時も確実にテストサーバーでメール受信確認もするし、必須だよ♪

タイトル
サーバー名エックスサーバーwpXSpeedエックスサーバー
ドメイン
ロリポップConohaWing
おすすめ度
(5.0 / 5.0)
(4.0 / 5.0)
(4.5 / 5.0)
(4.0 / 5.0)
(4.0 / 5.0)
一言私も一番使う+実務でもクライアント様のサーバーで一番多いWordPress専用の超高速クラウド型レンタルサーバー【wpX Speed】サーバー・ドメイン取得もエックスサーバーでセットでいろんなプランもあって、自分にあったプラン探してみるとよき★国内最速が売り!
独自ドメインも最大2つまで永久無料
ポイント・使ってる人多い
・ブログも多い
・ワードプレス専用・サーバー契約したらドメイン必須だお・人気ある
・利用満足度2冠達成!
・キャンペーン多めでお得に始められる
サイトへ行く詳細を見る詳細を見る詳細を見る詳細を見る詳細を見る

プラグイン/CDN編

まずはよく使うCDNから!

CDN(Contents Delivery Network, CDN)とは、

外部のファイルをリンク1つで使用することができる仕組みのこと!!

本来ファイルをダウンロードして…という手間がかかるけど、CDNを使用するとその手間を省ける!!

そしてCDNを使用するメリットとしては

  • CDN経由で読み込まれたファイルはブラウザにキャッシュされる
  • キャッシュを利用するのでページを表示するまでの時間が短くなる(高速になる)
  • 動きの確認するには手軽

しかし!デメリットとして

  • 配信が急に停止される可能性がある
  • 提供されているバージョンが公開を終了すると利用できなくなる

等…実案件などで使用していて急に動かなくなる。は困ってしまったりするのでCDN使用するかどうかなどは確認してから使用したほうがいいと思うよ★

jQueryのCDN

jQueryを使う時にはCDNを読み込まないと動きません!下に続くコードスニペットの中でも必須で入ってくるので入れ忘れはしないようにね★これ入れずに動かない!って最初はなりがちだから要注意★

jQueryのCDNには何種類かあるので、人によって使っているCDNは違うかもしれません!

</body>の直前で、jsファイルよりも上(先)に記載するのがおすすめ!!!!!!!!!!!!!!!!!!!!!

jQuery書いたのに思うように動かないなーって時は

まずjQueryが読み込まれているかを確認するこれ大事★★

私はCDNJSのCDN読み込みが一番多いです〜〜!

CDNJSの公式サイト▶https://cdnjs.com/libraries/jquery

	
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

もしくはjQueryのCDN★

jQueryの公式サイト▶https://releases.jquery.com/

	
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

バージョンなどは都度都度更新されていくので要チェック★

制作会社様とお仕事している中で特に指定されたりは今の所ナシ★

SwiperのCDN

Swiperはスライダーを使いたい時によく使う!

で!す!が!Swiperに関しては実案件ではほぼ99%CDNではなくファイルアップで対応してます!

テストサーバーでの確認とかの時にはCDNでサクッと確認してまっす!

Swiper公式サイト▶https://swiperjs.com/

スワイパーもバージョン確認必須★

下記はバージョン8のCDNになってます〜〜〜〜

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@8/swiper-bundle.min.css"
/>
<!-- JavaScript -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

ファイルアップの為のファイルダウンロードはこちらから

https://unpkg.com/browse/swiper@8.0.6/

必要なファイルは以下2つ(CSS と JavaScript)

  • swiper-bundle.min.css
  • swiper-bundle.min.js

ファイルを選択して開いたページで「View Raw」をクリックするとそのファイルが開くので、コピーするか保存して環境に合わせて配置して、ファイルを読み込も!

Swiperの使い方はいろんな人がいろんなブログ書いてくれてるからチェケラ♥

VSコードのEmmet

今後更新しまあああす!

おたのしみにいいいいい!

まとめ間に合いませんでしたあああああw

ここちゃ

ふぅうううううちょっと休憩

コードスニペット始まり♪

こっからが本番です♪

自分のまとめにコピペして貼り付けていってもいいし、ここに書いてあること思い出して必要なときに開いてくれてもいいしお好きに使ってあげて下さい★
これ使えないで。は遠慮なくDMください\(^o^)/

また、今回(2022年3月1日時点)載せているコードペンを全て記述した

HTML/CSS/SASS/Jsが入ったファイルも用意したので、実際にエディタとブラウザで見ながら

ファイルごともらっちゃってください★このブログ自体更新していくので、もしかしたらファイルも更新されるかもしれません!(まだ未定)

そんでもって配布するファイルのDEMOページも用意したので

ご覧あーーーーーーーーーれ!

GoogleDriveにzip入ってるお

ファイル一式ダウンロードする★★

まずはHTMLで忘れがちな設定ゾーン

metaタグ

headタグの中のmeta系の情報は指定されることも多いでし!キーワードやタイトルやDescriptionなど情報頂いてページそれぞれに設定することは必須であります!必要なもの必要じゃないものも案件毎で変わってくるけど毎回一旦これをhead内コピペして毎度設定してます!

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="format-detection" content="telephone=no">
  <title>タイトルが入るよ★</title>
  <!-- SEO系 -->
  <meta name="description" content="120文字以内!">
  <meta name="keywords" content="これは今はGoogleでは特に必要ないと言われてますがキーワードお願いされることも多々ある" />
  <!-- OGP -->
  <meta property="og:title" content="このページのタイトル/ページごとのタイトルにするお">
  <meta property="og:site_name" content="サイト名">
  <meta property="og:description" content="90文字くらい推奨">
  <meta property="og:type" content="TOPページはwebsite、子ページはarticle">
  <meta property="og:url" content="このページのURL">
  <meta property="og:image" content="1200×630以上推奨、絶対パス!!">
  <meta name="twitter:card" content="summary or summary_large_image">
  <meta name="twitter:site" content="@ユーザー名">
  <meta name="format-detection" content="telephone=no">
  <!-- タッチアイコン -->
  <link rel="apple-touch-icon" sizes="192x192" href="">
  <link rel="shortcut icon" sizes="192x192" href="">
 <!-- ファビコン -->
  <link rel="icon" href="" />  
 <!-- クローラー -->
  <meta name="robots" content="noindex">
</head>

外部リンクを別タブで開く時

外部リンクを別タブで開くようにしてください。はよくお願いされる。その時にtarget=”_blank”と一緒にrel属性の設定をするんだけど()これらはセキュリティの設定です!詳しくは調べてみてね!

これああああなんだっけ。ってよくなるから完全に自分メモ用★

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">リンク</a>

画像をレスポンシブに切り替える

<picture>タグを使うと、CSSやJavaScriptを使わなくても、画像をレスポンシブに切り替えることができる!(min-widthの部分はPCファーストかSPファーストかでminだったりmaxだったりそこは合わせてね★)

cssは全てimgタグで適用になるよ!

<picture>
  <source srcset="画像1URL" media="(min-width: 〇〇px)" /><!-- 〇〇px以上で表示したい画像 -->
  <source srcset="画像2URL" media="(min-width: 〇〇px)" /><!-- 〇〇px以上で表示したい画像 -->
  <img src="画像3のURL" alt="サンプル画像"/><!-- それ以外の時に表示する画像 -->
</picture>

WebP画像をページに貼りたい場合

<picture>
  <source srcset="WebP画像URL" type="image/webp"/>
  <img src="WebP未対応のブラウザの時に表示したい画像URL" />
<picture>

フッターコピーライトの年月を自動で更新してく

フッターコピーライトでよく2000-2022みたいに2022の方を今の年に更新していきたい。

ってことがあって。そんな時はコピーライト部分に下記のscript記述してあげると自動で今の年をとってきてくれて更新していってくれるよ★

<script type="text/javascript" language="JavaScript">
      TYnow = new Date();
      document.write(' - ' + TYnow.getFullYear());
</script>

全体の記述の見本はこんな感じ★↓

<small id="footer" class="copyright">© cocoadeblog 2021
 <script type="text/javascript" language="JavaScript">
          TYnow = new Date();
          document.write(' - ' + TYnow.getFullYear());
 </script>
</small>

それでは実際に実装編★

Codepenで書いてるので、右上のCodepenのマーク押すと全画面でコードペン開くのでそっちでみてみてね!
見え方の挙動がブログ上だとちょっとおかしい場合もあります!!
(幅的にレスポンシブさせてないので←)
よくある見出しとかボタンはいろんな人がいっぱいまとめてくれてるから特に書きません!

ハンバーガーメニュー★(全てのサイトで使うんじゃないかレベルで使うよね←)

よく使うバツボタンに変わるタイプと矢印に変わるタイプ。ほわっと出てくるタイプと右からしゅっとでてくるタイプです!

組み合わせかえて使ってもいいし、色や幅などは調整して使ってね!

★ほわっとハンバーガー/バツボタンになる

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

右からしゅっとハンバーガー/矢印に変わる

See the Pen ハンバーガー右からしゅっと/← by ここあ (@cocoadepon) on CodePen.

スムーススクロール

本当にスタイル適当当てすぎて可愛くなくてごめんねwwwww

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

トップへ戻るボタン★

これもとりあえずJsでどう動かしてるかだけ分かれば、あとはcssで見た目や場所整えていくだけだよ★

See the Pen スクロールトップ by ここあ (@cocoadepon) on CodePen.

ローディング画面

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

スワイパースライダー応用編

スワイパー使ったスライダーで普通の形ではなく実際に実装したもの★★センターだけ少し大きくなってセンター以外にはマスクがかかるタイプ!!

普通のタイプはよく見るSwiperの記事はこちら★
https://www.webdesignleaves.com/pr/plugins/swiper_js.html
めちゃめちゃ分かりやすいし詳しくいろんなパターン乗ってるからいろんなスライダー作ってみてね★

See the Pen スワイパートリッキーなやつ by ここあ (@cocoadepon) on CodePen.

カード型ボタン下部固定

横並びにした時(中のテキストが動的になる場合考えて、要素の長さがそれぞれ変わった時などボタンだけはカードの下に全部そろえておきたいVer)

中のタイトルが記事によって長さが変わっても詳しく見るの位置は全部統一。これワードプレスで動的にする時必須だよね結構!EDIT ON CODEPEN部分クリックして大きい画面でみてね!見えてる部分は多分縦並びになっちゃってるかも!

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

フローティング★

スクロールを止めたときだけ画面下に表示させたい(LPのボタンとかやりたい時)+一定の場所(例えばお問い合わせまでのボタン表示させててお問い合わせのセクションではもうださなくていい。とか)★以下からはもうそれを表示しなくていい的なやつ

スクロール中は表示されないお!LPで割りかしこのパターンよく使ってる!

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

モーダル★★★★

モーダルもめちゃくちゃいろいろな作り方があるよね!

今回はモーダル部分外クリックで閉じる+背景固定でし!

See the Pen モーダル by ここあ (@cocoadepon) on CodePen.

タブ切り替え(3/22更新NEW)

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

背景色がしゅんってしてから文字登場(3/22更新NEW)

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

スマホでテーブルを横スクロール!スクロールヒントもだすよ!

たまに見かけるスマホで表とかがスクロールできるようになってるあれ。

パット見スクロールできることに気づかないのも多いのでスクロールヒントだすことも多々。

今回は簡単にスクロールヒントが設置できるJavaScriptライブラリ「ScrollHint」 でさくっとスクロールヒント出してます★

公式はこちら▶https://appleple.github.io/scroll-hint/

今回はCDNを使っているので

<link rel="stylesheet" href="https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css">
<script src="https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js"></script>

上記のCDNを<head>内で読み込ませてスクロールさせる要素に“js-scrollable” クラスを付けて

jsに 下記の記述をするだけでなんとも簡単にスクロールヒントがだせちゃいます!!!!!!

DEMOページでもぜひ確認してみてね★

new ScrollHint('.js-scrollable');

See the Pen 横スクロール by ここあ (@cocoadepon) on CodePen.

テキストグラデーション

ふいに必要になるんだけど、なんだっけ。ってなるからφ(..)IEはバツでし

See the Pen Untitled by ここあ (@cocoadepon) on CodePen.

ここちゃ

休憩でえええええええす!!!!ここまで読んでる人いるのかな()

まっだまだ続くお←

ワードプレス編

プラグイン編

私がとりあえず絶対に最初にいれてあるプラグインだけ紹介します!案件ごとに必要なものは変わってくるかと思いますが!ローカルのブループリントで毎回複製してるファイルにいれてるプラグイン達です★

私が普段ブループリントで使ってるWPのマイグレーションファイルをお配りしますー♪

普段はgulp環境もいれてますがそれは抜いてます!ご了承くださいまし!

ただ普段最初から使っているプラグインはそのままになってます!ブループリントはlocalでワードプレス構築をする時にとっても簡単に環境を作れるテンプレートです!

まずは普通にローカルで新しく環境作って All-in-One WP Migration プラグインだけいれて、インストールしたらブループリントの土台は完成するので、そこから自分好みに環境作成してみてね★

ユーザーIDはadmin

パスワードは1234

です!!!!!

詳しい使い方はこちらのブログに書いてあります(*^^*)

ブログ▶https://ryota-noz.work/waza/wp/290/

ブループリント一つ自分好みにgulp環境からなにから作っておくと案件毎の環境構築の手間が9割位半減するから時間ある時に自分流ブループリント作ってみると良いよ!

案件によって削除するものもあるし、追加でいろいろいれたりもするんだけど、最低限とりあえず最初に欲しいやつを厳選してます!

配布するブループリントにいれているプラグインはこちら↓

エントリーNO1★

Show Current Template ▶▶▶ ツールバーに現在のテンプレートファイル名を表示します。

※最初は特に推移先がきちんと思い通りのテンプレートファイルに飛んでいるのか。目視で確認できるのでオリジナルテーマ作る過程では必須!

エントリーNO2★

Admin Bar Position ▶▶▶ 「管理バー」の位置を下に変更することができる。

※デフォルトではページの上にでる管理バー。ヘッダー作成中とか邪魔だなーって思ったことない?この管理バーを下に配置できるからコーディングの邪魔とかにならなくてワタシ的には必須!

エントリーNO3★

Yoast Duplicate Post ▶▶ 任意の種類の投稿を複製したり、新しい下書きにコピーしてさらに編集したりできます。

※テスト投稿などいちいち打ち込むのがめんどくさい!このプラグインで簡単に記事を複製できるのでループ表示の表示確認の時の記事量産で力を発揮する!(使わないことも多々ある)

エントリーNO4★

All-in-One WP Migration ▶▶たった3ステップでサイトの引っ越しが完了するプラグイン

※今回のブループリントもマイグレーションで配布してます。新しく作ったローカルのワードプレスにマイグレーションで今回配布したものインポートすれば完璧です!管理画面からの操作だけでサイトの引っ越しが完了する そんなプラグインです。検索をかければ使い方に関してはたくさんの方がブログを書いてくれているので割愛します★気をつけなきゃいけない場面などもあるのでそれはよく調べてみてね!

エントリーNO5★

Custom Post Type UIWordPress でカスタム投稿タイプおよびカスタムタクソノミーを作るための管理画面

※ワードプレス勉強を始めたら最初に来る難問カスタム三兄弟!ごにょごにょ自分で作れるんだけど見やすいし作りやすいし、簡単にカスタム投稿作れる。これも検索したらたくさんの人がいろいろなブログを書いてくれてるから要ちぇけら

エントリーNO6★

Advanced Custom Fields ▶▶WordPressのカスタムフィールドの仕組みを拡張して、さまざまな形式の入力項目を追加できる様にする

※カスタム三兄弟の1つカスタムフィールドを拡張して追加していけるプラグイン!「カスタム投稿タイプ」と組み合わせた使用方法が一般的で幅広くワードプレスを使いやすく運用しやすくしてくれる★これも検索したらたくさんの人がいろいろなブログを書いてくれてるよ!

以上!!!!!!

最低限最初に入った状態で必要としてるのはだいたいこいつらだなーと思って、ブループリントはこれだけにしてます!

実際案件で更に細かい必要になってくるプラグインだったりとか、コンタクトフォーム系のプラグインだったりとか必須になってくるものってあるんだけど、そこは案件に合わせて取捨選択してオリジナルのテーマ作るものだと思うので、とりあえずだいたい毎回使ってるものだけに厳選してます!!

むしろブループリントの最大のメリットは、初期設定で必要なPHPファイルやCSSなど全部いちいち毎回環境構築しなくてもいいところかもしれない★

そしてfunctionにいれることだったりも

毎回作るのって結構大変だから、アイキャッチ出す。とかcss読み込む。とか

そういったものを作り込んでおけるのはとっても楽ちん

ワードプレス関数に行く前にカプセル化について★

swiperやslickとかその他js(jQuery)をどこからかコピペして動かそうと思った時に動かない事が良くあります!上記のコードペンのjs(jQuery)もワードプレスで使おうと思ったら一工夫必要。

自分で作ったjsファイルにコピペして、html側でclassも同じ様に当ててるのになぜかワードプレスで動かない、、

実はWordPressに最初から搭載されてるjQueryは特別性で、そのままだとが効かない!

なので、この$を使える様にしなくてはだめ!!!!!!!

そのためにカプセル化をしてあげる。

(function($) {  

// ここに処理を書く

})(jQuery);

上の魔法の呪文で囲ってあげるとWPでも$が使える様になるんだおおお!

具体的にコードを囲ってみると

(function($) {    //← これで囲う!!!!
 $(function() {
    $('.toggle').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.g-menu').addClass('active');
        } else {
            $('.g-menu').removeClass('active');
        }
    });
 });
})(jQuery); //← これで囲う!!!!

こんな感じ!!Jsが静的で作ってた時は動いたのにワードプレスに入れた瞬間全く反応しない。

詰んだ。。。は私も最初つまりまくりました!!!!w

外観からテーマの部分の表示設定

今回配布してるブループリントのテーマ部分はこうなってます!

ここの設定★★テーマの中にstyle.cssをテーマのスタイルを当てる為のCSSとは別にテーマのトップディレクトリ直下におく!

んでその中に下記記述

/*
Theme Name: ワードプレステーマ名
Theme URI: テーマのURLを記入します
Author: テーマの作者(組織名)を記入します
Author URI: テーマの作者のURLを記入します
Description: ここにテーマの説明文を記入します
Version: 1.0
*/

スクリーンショットもテーマのトップディレクトリ直下にscreenshot.pngの名前で設置してあげるだけでここに反映されまっせ!

ファイルの中はこんな感じ★

ワードプレス関数

いろいろな関数がワードプレスには用意されています。ここからいろいろな関数がでてきますが分からないものはコピペして検索してみるといくらでもいろいろな記事がでてくるので

公式サイト読む癖をつけていくことがとっても大事だよ!

ここちゃも最初はCODEX大嫌いで全然読めなかったんだけど、嫌でも読む必要がでてきて、気づいたら読めるようになってるから、わからないなりに読む。は最初から意識してみるといいよ\(^o^)/

よく使う条件分岐のパターン一覧

ワードプレスはPHPだから条件分岐がめちゃくちゃ出てくる!

条件分岐をすることで

「このページにはこれを、あのページにはあれを!」って色々出力を変更出来るから凄く便利!

下記のis_なんちゃらのisの前に(ビックリマーク)を付けると否定形になるお★★

if ( is_front_page() && is_home() ) {
// デフォルトホームページ この2つはセットで覚えておくといい

} elseif ( is_single() ) {
// 個別投稿のページ

} elseif ( is_single( '17' )  ) {
// ID 17の投稿

} elseif ( is_single( 'gal' )  ) {
// "gal" という投稿スラッグの投稿

} elseif ( is_page() ) {
// 個別投稿のページ

} elseif ( is_page('17') ) {
// ID 17の個別投稿のページ

} elseif ( is_page('gal') ) {
// "gal" という投稿スラッグの個別投稿のページ

} elseif ( is_category() () ) {
// カテゴリーのページ

} elseif ( is_tag() ) {
// タグのページ

} elseif ( is_tax() ) {
// 個別投稿のページ

} elseif ( is_archive() ) {
// アーカイブのページ

} elseif ( is_404() ) {
// 404のページ

} elseif ( is_search() ) {
// 検索結果のページ

} else {
// それ以外
}

メインループ

メインループとかサブループとかなんぞや?て人へ届け。ちょっと完結にまとめただけなので詳しいことはちゃんと自分で理解してね!ww

メインループとはテンプレートに対してデフォルトで読み込んで来てくれるクエリ

トップページのテンプレートindex.phpやfront-page.php・archive・などに対しては特に設定しなくてもデフォルトで「投稿」の情報を読み込んで来てくれます。という事で、トップページのメインループは「投稿」です!!!一覧ページのarchive.phpもです!またカスタム投稿などのslugを指定したテンプレートファイルなんかもメインループでいけます★

<?php
if (have_posts()) :
  while (have_posts()) : the_post();
    the_content();
  endwhile;
endif;
?>

サブループ

サブループはメインループと違い自身で読み込む設定を行います

例えば、「投稿」はトップページのテンプレートやarchive.phpなどにはデフォルトで読み込まれますが、固定ページのpage.phpには読み込まれない!
でも固定ページにお知らせの一覧を表示させたい場合とか、トップページにカスタム投稿の数記事出したいとかあると思います。page.phpがデフォルトで読み込むクエリは固定ページの情報ですので「投稿」や「カスタム投稿」の情報が欲しいときはサブループを使用します。

<?php
      $wp_query = new WP_Query();
      $param = array(
        'posts_per_page' => '-1', //表示件数。-1なら全件表示 最新3件だけ表示したいなら3にする
        'post_type' => 'post', //←*ここ変える(投稿だったらpost.カスタム投稿ならslug名カスタム投稿タイプの名称を入れる)
        'post_status' => 'publish', //取得するステータス。publishなら一般公開のもののみ
        'orderby' => 'ID', //ID順に並び替え
        'order' => 'DESC'
      );
      $wp_query->query($param);
      if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
         
      ?>

        //ここに、ループで回したいものを書く
          <?= the_title() ?>
          <?= the_content() ?>
       //上の2つはとりあえずで置いてるだけ

      <?php
        endwhile;
      endif;
      ?>

ワードプレスでsrcのパス出力!

<?php echo get_template_directory_uri(); ?>

//使い方例
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/assets/js/script.js"></script>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/common/blog03.jpg" alt="blog" />

記事タイトルを呼び出す・表示する文字数を決める

<?php the_title(); ?>

//表示する文字数を制限したい時はこちら 35,の部分が表示させたい文字数を設定する
// '...'の部分が表示文字数を超えた後の表示になるよっっ
<?php echo wp_trim_words(get_the_title(), 35, '...'); ?>

記事のコンテンツを呼び出す・表示する文字数を決める

<?php the_content(); ?>

//表示する文字数を制限したい時はこちら 55,の部分が表示させたい文字数を設定する
// '...'の部分が表示文字数を超えた後の表示になるよっっ
<?php echo wp_trim_words( get_the_content(), 55, '...' ); ?>

日付を出力する

<?php echo get_the_date(); ?>

アイキャッチ画像出力

//シンプルなパターン
<?php the_post_thumbnail(); ?>


//アイキャッチがない場合の画像も指定したい場合
<?php
  // アイキャッチがある時の処理
  if(has_post_thumbnail()){
    the_post_thumbnail();
  
 }else{
  //ここからアイキャッチが無い時の処理
 //あらかじめメディアやFTPでアップロードしておく
?>
  <img src="<?php echo get_template_directory_uri(); ?>/image/no-image.png" alt="" />
<?php
 } ?>

カテゴリーを一覧でリストで表示する

(半角とか全角がコピーした時入ったらそこは気をつけてね!)
<ul class="category">
  <?php
   $cats = get_the_category();
   foreach ($cats as $cat) {
   echo '<li><a href="' . get_category_link($cat->term_id) . '">'
   . $cat->name . '</a></li>';
  } ?>
</ul>

投稿一覧でそれぞれのカテゴリーを押すとそれぞれの記事出力して見てるカテゴリーの色を変える(意味わかる?)

こんな感じでタームとかカテゴリーそれぞれ押すとそれぞれ紐付いてる記事がでてくるみたいな。開いてるページにハイライトあたってるみたいな

開いてるページにis-activeクラスを付与してるのでis-activeクラスにcssでスタイルあててあげればOK

   <ul class="term-nav">
        <?php
        $args = [
          'hide_empty' => false,
          'taxonomy' => 'blog_shop',
        ];
        $the_query = new WP_Term_Query($args);
        foreach ($the_query->get_terms() as $term) :
        ?>
          <?php
          $cat = get_queried_object();
          $cat_name = $cat->name;
          ?>
          <li class="term-nav-link">
            <a class="
            <?php if ($cat_name == esc_html($term->name)) {
              echo "is-active";
            } ?>" href="<?php echo esc_url(get_term_link($term, 'blog_shop')); ?>">
              <?php echo esc_html($term->name); ?></a>
          </li>
        <?php
        endforeach;
        ?>
      </ul>

関連記事を出力する

<?php 
if (has_category()) :
  $post_cats = get_the_category();
  $cat_ids = array();
  //所属カテゴリーのIDリストを作っておく
   foreach ($post_cats as $cat) :
     $cat_ids[] = $cat->term_id;
    endforeach;
   endif;
   $myposts = get_posts(array(
   'post_type' => 'post', // 投稿タイプ指定
   'posts_per_page' => '3', // 3件を取得
   'post__not_in' => array($post->ID), // 表示中の投稿を除外
   'category__in' => $cat_ids, // この投稿と同じカテゴリーに属する投稿の中から
   'orderby' => 'rand', // ランダムに
   ));
    if ($myposts) :
 foreach ($myposts as $post) :
 setup_postdata($post);
 ?>

              // ここに自分で作ったHTML

<?php 
endforeach;
      wp_reset_postdata();
endif; 
?>

新着の記事にNEWのマークをつける!

ループしてる記事の中で、1週間以内に公開した記事とかNEWマーク付けたいよね?

付けたいよね!

そうゆう時は以下のコードで簡単につける事ができちゃうよ!

//記事の公開時間
$get_time = get_the_time('U');

//何日以内の記事にNEWをつけるか?此処を変更すればOK
$w = 7;

// 今の時間 - 7日
$last = time() - ($w * 24 * 60 * 60);

// 記事の公開時間が7日以内かどうかを判定。
//  7日以内だったらpタグ入れる
if ($get_time > $last) {
   echo '<p class="new">NEW</p>';
}

ページネーション

CODEX▶

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/paginate_links

  <?php if (paginate_links()) : ?>
    <!-- //ページが1ページ以上あれば以下を表示  -->
  <!-- pagination -->
    <div class="l-pagination p-pagination">
      <?php
       echo
        paginate_links(
         array(
          'end_size' => 1,
          'mid_size' => 2,
          'prev_next' => true,
          'prev_text' => '<div class="p-pagination__previous"></div>',
          'next_text' => '<div class="p-pagination__next"></div>',
        )
        );
       ?>
     </div><!-- /pagination -->
   <?php endif; ?>

★ほわっとハンバーガー/バツボタンになるのWordPress版!!

コードペンゾーンで紹介した★ほわっとハンバーガー/バツボタンになるをワードプレスでカスタムメニューで作りたい時の実装例でし!

まずはfunctions.phpに下記追加★

<?php
register_nav_menus(
  array(
    'cocoa' => 'ここあメニュー',
    )
);
// wp_nav_menuのliにclass追加
function add_additional_class_on_li($classes, $item, $args)
{
  if (isset($args->add_li_class)) {
    $classes['class'] = $args->add_li_class;
  }
  return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
?>

そして挿入したい場所に書く記述↓

<?php
wp_nav_menu( array(
  'theme_location'  => 'cocoa',
  'container'       => 'nav',
  'container_class' => 'p-globalMenuSp js-globalMenuSp',
  'menu_id'         => 'menu',
  'menu_class'      => 'p-header__item',
  'add_li_class'    => 'p-globalMenuSp__link',
  ) );
?>

カスタムメニューの管理画面側の設定は、ここでは割愛します!!っが調べるか

前にめちゃめちゃ簡単にカスタムメニューの記事書いたことがあるので(あんま参考にはならん←)

使いこなして使ってみてね★

ちなみにカスタムメニュー実際に案件で使うことって私はあんまりない!なぜかメニューは動的にしないで。ってお願いされることが多くて(T_T)

カスタムフィールド系

ここは今後一気に更新します★

お待ちぉぉぉぉっぉおっぉぉぉぉおおおおおおおおおおおおおおおおおおお

カスタムテンプレートの作り方

「完全にこのページは他と見せ方変えたいんだよなぁ。。」

っていう時あるよね

そうゆう時にはカスタムテンプレートを使うと便利だよ!

まず最初にテーマ内にdemo.phpを作成してね!(名前は何でもいいお!)

その中に

<?php
/*
Template Name: demo
*/
?>
カスタムテンプレートだよ

って書いて!

次に固定ページを作成してね!タイトルは何でも良いお!

作成した固定ページの右側にテンプレートを選択出来る画面があるから、ここからさっき作ったカスタムテンプレート「demo」が選べる様に成るよ!

これだけで、カスタムテンプレートは完成!

ヘッダーやフッターも自由に読み込めるから、デザインを大きく変えたい時とかは便利!

上記にあったコードペンのDemoページはこの作り方で作ってあるよん!!!!

functions.phpによく書くものたち★

CSSとJavaScriptの読み込み

静的サイトではhead内にベタで書いてる読み込ませたいファイルたちもワードプレスはfunctions.phpで管理してあげる★

/**
 * CSSとJavaScriptの読み込み
 *
 * @codex https://wpdocs.osdn.jp/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC
 */
function my_script_init()
{
	wp_deregister_script('jquery');
	// jQueryの読み込み
	wp_enqueue_script('jquery', '//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js', "", "1.0.1");
 //グーグルフォントとかの読み込み
	wp_enqueue_style('my-font', '//fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Maru+Gothic:wght@400;500;700&display=swap');
 //自作css/jsファイルの読み込み
	wp_enqueue_style('my-css', get_template_directory_uri() . '/assets/css/$1.min.css', array(), '1.0.1', 'all');
	wp_enqueue_script('my-js', get_template_directory_uri() . '/assets/js/script.js', array('jquery'), '1.0.1', true);
}
add_action('wp_enqueue_scripts', 'my_script_init');

デフォルトで投稿になってる管理画面の投稿の文字を変える

投稿ってわかりづらくてここがお知らせとかブログとかそのワードプレスで何を更新する為の場所なのか視覚的に分かりたいなーってクライアント様目線で思ってよくこれする

////////////////////////////////////////////////////
// /* 管理メニューの「投稿」に関する表示を「お知らせ(任意)」に変更
// *************************************************************************************/
function change_post_menu_label()
{
	global $menu;
	global $submenu;
	$menu[5][0] = 'お知らせ';
	$submenu['edit.php'][5][0] = 'お知らせ一覧';
	$submenu['edit.php'][10][0] = '新しいお知らせ';
	$submenu['edit.php'][16][0] = 'タグ';
}
// /* 管理画面上の「投稿」に関する表示を「お知らせ」に変更
// *************************************************************************************/
function change_post_object_label()
{
	global $wp_post_types;
	$labels = &$wp_post_types['post']->labels;
	$labels->name = 'お知らせ';
	$labels->singular_name = 'お知らせ';
	$labels->add_new = _x('追加', 'お知らせ');
	$labels->add_new_item = 'お知らせの新規追加';
	$labels->edit_item = 'お知らせの編集';
	$labels->new_item = '新規お知らせ';
	$labels->view_item = 'お知らせを表示';
	$labels->search_items = 'お知らせを検索';
	$labels->not_found = '記事が見つかりませんでした';
	$labels->not_found_in_trash = 'ゴミ箱に記事は見つかりませんでした';
}
add_action('init', 'change_post_object_label');
add_action('admin_menu', 'change_post_menu_label');
//////////////////////////////////////////////////////////
わんこたち

長くない?もうよくない?まだあるお★

静的サイト(LPとか)のお問合せフォームをグーグル非同期通信ではなく実装する

お問合せフォームがあるならワードプレスにしちゃおっかな。。。ってよく聞く。

けれどちょっとまったーー!!

ちゃんと静的サイトでもお問合せフォームをPHPをごっりごっり書かないといけない!

わけじゃなくて、お問合せフォームライブラリを使用してきちんと対応できます

グーグルフォームの埋め込みで簡単に!もよくあるけれどグーグルフォームが必ずしも使えるとは限らないので、静的サイトの時のお問合せフォームでお世話になりまくっているライブラリ

レスポンシブメールフォームのご紹介でし!

サンクスページから相手への自動返信もデフォでついてる!入力補助や、バリデーションも標準装備★★

またお問い合わせ内容を飛ばしたいメールアドレスも既定の場所にメールアドレスを貼り付けるだけでメールが届くようになってます!

公式 ▶ https://www.1-firststep.com/archives/462

公式に使い方から設置方法・ダウンロード方法はめちゃくちゃ詳しくのっているので、基本の使い方は公式のブログ通りに進めていって下さい!

少しカスタマイズしたい。とかLPで1ページ完結したくてサンクスページ飛ばなくていいんだよなー。とかあると思います。デフォルトでサンクスページに飛ぶ仕様になっているので、少し中身をいじらないといけないので、そのいじる部分+私が実際に案件で使う時にやったものだけご紹介します!

ちなみにPHP使うので、MAMPなどの環境でローカル環境作らないと上手く挙動確認はできないと思うので気をつけてね!

また、私も何度か公式にお問い合わせをして使い方について聞いたりしたこともあるんですが、返信の速さもすごい早いし、公式さんがテストサーバーにあげたメールフォームで送受信確認してくれて挙動がおかしくないか確認していただいたり。。。いつも助かってます!w

サンクスページには飛ばずに同じページ内で送信完了したい。

同じページで完結させて、サンクスページには飛ばしたくない!って場合は、jsファイルの中にあるclass.mailform-js.phpファイルの中の下記の部分を検索で探してみて

if ( response[0] === 'send_success' ) {
	window.location.href = response[1];
}

この部分をコメントアウト

if ( response[0] === 'send_success' ) {
	// window.location.href = response[1];
}

消してあげるとサンクスページには飛ばずに、同じページ内で送信完了します!

ですが、推移しないことによって、本当に送信できたか分かりづらいので、

ボタンの下にお問い合わせありがとうございました。とか、送信されました。って文字を

出したいなーという新たな問題がでてきます★

そんな時は、、、

送信ありがとうございました。の文字を同じページ内で出す。

さっきコメントアウトしたところの下,elseの上に

	if ( response[0] === 'send_success' ) {
          // window.location.href = response[1];
          //この↓を追加する。spanの中に出したい文字を入れる #send-msgはスタイルをcssで決めるためのID
            $('#send-msg').append('<span>お問い合わせありがとうございました。</span>')
            $('#mail_form')[0].reset();
            } else {

この記述をしたら、実際に出したい場所(ボタンの下とか)にHTMLで

<div id="send-msg"></div>

これをいれといてあげて、send-msgに対して出したいスタイルを普通にcssで組んであげればOK★

このsend-msgは$(‘#send-msg’).append(‘お問い合わせありがとうございました。’)この最初の括弧の中で指定しているidなので、自由に変更可能!

下のは例です!とりあえず下の入れたら太字で真ん中にお問い合わせありがとうございました。ってシンプルにとりあえずでます!

#send-msg {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
参考動画▼

そしてこれも毎回やってる処理の一つ!

送信してもよろしいですか?と上部にでるポップアップを消したい!!!!!

デフォルトで上部に送信ボタンを押したタイミングで送信してもよろしいですか?のポップアップがでるんだけど、デザイン的にもいらないなーーーってなるのとお客様からもいらない、と言われることが多かったのでこれを消す作業!

if ( window.confirm( '送信してもよろしいですか?' ) ) {
	send_setup();
	order_set();
	send_method();
}

jsファイルの中にあるclass.mailform-js.phpファイルの中のこの部分を今までと同じように

コメントアウトするのみ!

// if ( window.confirm( '送信してもよろしいですか?' ) ) {
	send_setup();
	order_set();
	send_method();
// }

あとは自動返信メールの内容変えたりとか基本は無料なんですが

有料で各種アドオンも用意もされているので、いろいろ公式サイト読みつつ

mampとかテストサーバー使って自分のメアドでいろいろ試して遊んでみて

仲良くなってみてね★

これで静的サイトのシンプルなお問合せフォームきても

怖いものなし(だいたいは)!!やったね!!!

とりあえず見てみる!!!!

公式サイトへ行く!!
ここちゃ

これにて終了!!!!!!!!!!!!!!!!!!!!!!!

今回の配布ブログはとりあえずここまで!

このブログの一番の見どころは揺れるここちゃです!

さてここで問題です

何匹揺れるここちゃはでてきたでしょうか!!!!

チクタクチクタク★★★★

この内容はどんどん更新もされていくし、

もっとこういう方がいいよ!とかいろんなの待ってます★

またこれものせてのせてー!もあればいつでも協力待ってるね★

そして、今フリーランスになろうと頑張っているみんなへ

WEB制作って道を通してフリーランスになろうと頑張っているみんなだと思います。ここちゃの存在を知ってこのブログに辿り着いた多くの人が。

私は今年でフリーランス11年目。たくさんの人と出会ったり、挫折してしまっていなくなってきた人たち。数え切れないくらいたくさんの人とこれまで関わってきました。

フリーランスって簡単じゃない。きついです。最初は特に。

そしてそれを継続していくことはもっと難しいです。

0→1達成できてもそれはスタートの一歩でしかなくて、みんなただの就職したての新人。

でも企業みたいに新人だからって手取り足取り教えてくれるわけでもないし許されるわけでもない。新人だからしょーがないか次々!って失敗をカバーしてくれる上司がいるわけじゃない。

就職したての新人が全ての責任を背負わなければいけない最初から。だからこそ、ちゃんと正しく勉強して準備して時間かけてちゃんと責任がとれる状態で仕事はするべきだし、駆け出しなんで。はお客様には一切通用しないし、関係ないからこそ

プロとして常に知識をつけていく努力はしないといけない。焦らなくていい。

まーこれくらいでいっか。は命取りだし誰かがやってくれるだろう。もありえない。

でも、今の時代周りにたくさん仲間がいて、助けてくれる人たちもたくさんいて。

絶対自分の居場所は作れる環境はある。

だからこそ一人にならないでフリーランスになることをみんなに楽しんでもらいたいなって思う★

フリーランスじゃなくて兼業の人たちも。せっかくWEB制作って道で出会えたので

辛いなら頼ればいいし、相談すればいい★

いつでもここちゃはみんなの味方でいたいなって思います\(^o^)/

綺麗事とかそんなんじゃなくて頼ってくれた人には全力で答えていきたいなーって思ったり!

ここちゃは何かを与えることはできないかもしれないけど、

何かを見せ続けて誰かの指標になれるように

今関わってくれてるみんなが10年後も一緒に笑ってる仲間でいれるように!

ここちゃはこれからも走り続けるのでみんなも一緒に走ろーーーね!

ここまで読んでくれたみんなラブリーーーーー!!!

ここちゃでした\(^o^)/

COCOA

18歳からフリーランスとして生きてます★ このブログではWEB制作を中心に日常からいろいろなことを書いていきます!
パリピワールドへようこそ\(^o^)/
お仕事のご依頼はお問い合わせ又はTwitterからお願いします★

人気記事