プログラミング復習帳〜その5〜

SHARE

今回も、案件にて学んだことをまとめていきます。

私は現在、看護師として働いており、WEB制作は未経験から独学とメンターをつけ学習を行い、クラウドソーシングサイトにて案件をいただいています。

 

案件の内容について

クラウドソーシングサイトで4件目の案件を受けることができました。
今回の案件も前回依頼してくださったクライアント様からのご依頼でした。

今回の案件では、参考サイトを元にWordPressにて飲食店のサイト作るものでした。

ボリュームは1P、メニューの画像やお店の画像、ロゴ画像など提供していただき、参考サイトとほとんど同じ構造でページを作っていきました。

 

作業時の学び：順調編

今回は参考サイトを元にデザインを行っていくということで、ワイヤーフレームが決まっているような形で、細かいデザインは自分で行っていくというように受け取りました。

また、ご依頼時に
「制作はWordPress（テーマの使用可能）」
とのコメントがありました。

私はてっきり、（テーマを使用して作るのか〜）
ぐらいに思っていました。

そこでまず迷ったことが。

テーマって何使ったらいいの？？でした。

テーマ選び→「Sydney」

最終的に今回はSydneyを使いました。

今まで自作テーマでのみ作成を行っていたため、既存のテーマを使って作成を行うのが初めてでしてた。

まずは、いただいた参考サイトを調べテーマを調べましたが、日本のものではないようで、テーマをググってみても英語表記の物ばかり…
そのため、参考サイトで使用されているテーマの使用は諦めました。

次に、『WordPress　飲食店　テーマ』
と調べました。

そこで出てきたのが、「Lightning」や「Sydney」など多くのテーマ。

もう何を使ったらいいのかわからず、ぱっと見で気に入った「Sydney」を使用することにしました。

この選択が色々な困難と作業時間をもたらすとは…(￣∀￣)

 

Sydneyで子テーマの作成

既存のテーマを使う場合は、テーマのアップデートなどを考慮して子テーマを使用しカスタマイズを行うのが良いとのこと。

https://athemes.com/download/sydney-child-theme/

Sydneyの場合、このサイトにて子テーマを作ることができました。

ですが、子テーマのcssに上書きしていっても全然反映されず…
他にも何か作業が必要だった様です。
改善策を見つけられず、WordPressカスタマイズ内の追加cssに書いていくことにしました。

 

Sydneyを使ってよかったこと

メインビジュアルを作るのがとっても簡単でした。

画像はスライダーで、文字もスライダーに合わせて変更できたり、メインメニュー（ヘッダー）の感じもオシャンでした。

こんなに簡単に作れるんだー！
とここまでは順調に、簡単に作ることができていました。

 

Sydneyカスタマイズ

クライアント様からの希望でローディングアニメーションは消して欲しいとのことでした。
Sydneyのローディングアニメーションはこちらで消すことができました。

preloader .pre-bounce1, .preloader .pre-bounce2 {
   display: none;
}

 

参考サイト

https://athemes.com/snippets/change-preloader/

こちらで好きなローディングアニメーションに変更をすることも可能です。

 

メインビジュアルのテキストのスライダーの変更

こちら、元々は横からスライドしてくる仕組みになっています。
カスタマイズのところで、「テキストをスライドさせない」というところにチェックを入れてみましたが、スライドされてしまいました。

こちらで解決できました。

.text-slider {
	animation: none;
}

 

ここまでは順調でしたが、この後が既存テーマを使用したがため色々と苦労をしてしまいました。

 

【おすすめ】UdemyでともすたさんのWordPress講座を学んでみる！！

 

作業時の学び：苦労編

なんといっても今回は苦労が多かった(￣∀￣)笑

私はいつもWordPressでの開発時は、とりあえずHTMLをバーっと書いて、それからphp化をしていきます。
デザインを行うのが初めてだったため、デザインや色選びに時間を費やしたものの、決まればすぐにHTML、CSSが完成しました。

今回は1Pだったので、固定ページにて作成することにしました。
Sydneyのテーマ内に固定ページ用のテンプレーとがあったため、それをコピーして子テーマ内に入れ、コードを書いていきました。
固定ページのテンプレートも3種類ほどあり、迷いましたが、調べてみてもよくわからず、とりあえずフロントページを選びました。

そして、いざ、phpに変更、ワードプレスで進めるぞ！っと思いきや、コードを書いていない、調べる時間が長いこと長いこと…

今回の苦労をまとめていきます。

 

CSS・Jsが子テーマで読み込まれない問題

前述しましたが、子テーマのCSS、JSに追加をしても読み込まれず…

結局CSSは全て追加CSSに記載、JS等は親テーマ内に記載。

子テーマの意味…と思いつつも形にはなりました。

そしてここからが大問題！
今回はスライダーを使用したかったため、Slickを使用していました。

Slickを使うにはSlickのCSSとJsファイルの読み込みが必要なのですが、これを記載する場所がわからない…

親テーマのheader.phpをみてみましたが見つけられず。

調べると、functions.phpに記載することでheader内にコードを記載できるとのこと。

参考サイト

head内にソースコードを追加する手順（子テーマのfunctions.phpを使った方法）

 

コード

// head内にカスタム用のコードを追加する
function meta_headcustomtags() {
$headcustomtag = <<<EOM

<!-- headに表示させたいコードをここに！（この行は消してね）-->

EOM;
echo $headcustomtag;
}
add_action( 'wp_head', 'meta_headcustomtags', 99);

これで、head内にcss等を読み込むことができる様になったのですが、うまく作動しませんでした。

調べてみると、WordPress内でjQueryを読み込む前にslick.jsを読み込んでいたため、うまく動いてなかった様です。

そこで、読み込みの順番を変更できるコードの記述を見つけました。

参考サイト

テーマにJavaScript（jsファイル）を正しい方法で読み込む

 

コード 

function twpp_enqueue_scripts() {
  wp_enqueue_script( 
    'slick-script', 
    get_template_directory_uri() . '/js/slick.min.js' ,
	  array( 'jquery-migrate-js' ) //WordPress内のjQueryが読み込まれた後に…ってなります。
  );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_scripts' );

 

ここまで調べるのに、かなり時間を費やしてしまいました…

最後は今回できる様になったことです。

 

作業での学び：できるようになったこと

背景のデザインを色々試してみました。

CSSで三角形を作る方法

参考サイト

https://cocotiie.com/css-diagonal-design/

 

固定された背景画像（パララックス）

参考サイト

HTMLとCSSでパララックスページを作ってみよう

パララックスという用語を知らなかったため「css 背景固定」などで調べましたが、しっかりヒットしてくれました。

 

slickを背景画像として使用・スライダーパターンの変更

使用したいコンテンツの一番最初にslickを入れて、その他のコンテンツの中身ををpotision: absoluteで浮かせることで、slickを背景画像の様に使用してみました。

jQuery('.slider').slick({
  autoplay:true,
  autoplaySpeed:4000,
  speed: 3000,
  dots:false,
  infinite: true,
  arrows: false,
  fade: true, //これでfadeに変更
});

fade: trueにすることで、スライダーからぼわんって感じのfadeにカスタマイズをすることができました！

 

メールが起動するaタグ

今回はお問い合わせのコンテンツにaタグでクリックするとメールが起動する実装ができる様になりました！

<a href="mailto:メールアドレス&#64;gmal.co.jp?subject=件名の内容" class="contact-content-item">お問い合わせはこちら</a>

mailtoを入れることで、メールが起動します。
迷惑メール対策としてメールアドレスのアットマーク（ @ )は、文字参照で&#64;と記述することもできるようです。

また、subjectでメール内の件名にあらかじめ内容を入れることもできます。

参考サイト

https://www.tagindex.com/html_tag/link/a_mailto_sub.html

 

Photoshop/Lightroom Classic CCを使用した簡単な画像の加工

今回いただいたお料理の写真をトリミングしたりするのにPhotoshopを使用しました。

参考サイト

https://helpx.adobe.com/jp/lightroom-classic/kb/cpsid_90674.html

 

また、Webページに適した画像の最適化についても少し学ぶことができました。

参考サイト

https://wp-p.info/tpl_rep.php?cat=photoshop-biginner&fl=r5

https://akihiko-s.com/imageoptim

 

WordPressのカスタムフィールド、カスタム投稿タイプを作れる様になった

最後に、今回も前回同様、文字や画像が変更できるようカスタムフィールドを使用しました。

また、今回はさらに、メニューを増減・変更できる様カスタム投稿タイプを作成しブログの様な形でメニューを増やせるようにしました。

メニューの投稿ページ内にもカスタムフィールドを使用し、簡単に操作できるよう心がけてみました。

参考動画

アキユキさんの動画はどれも非常にわかりやすいです！

WordPress初心者の方はぜひ参考に！！

 

【おすすめ】UdemyでともすたさんのWordPress講座を学んでみる！！

 

まとめ

今回学んだこととして、WordPressでのサイト制作で無理に既存テーマを使用するのはやめよう…
ということでした。

既存テーマを生かしたコーディングは、メインビジュアルぐらいで、あとは自分でコードを書いて作成しました。

自分的にも自分でコードが自由にかける方が便利だし、スムーズ！

コードを書く、デザインを考える以外の時間がすごく長くなってしまいましたが、これもいい学びになりました。

デザインが決まっているサイト作りで、既存のテーマを使用するメリットはなんなのか…(・Д・)
今後、その答えに出会えることがあったらいいなと思います。

 

そして何より嬉しかったのが、前回制作を依頼してくださったクライアント様からの再依頼だったことです。

初回の対応や制作物に満足していただけたと思うと、とっても嬉しかったです。

今後もリピートしていただけるよう、しっかりと学びを深めること。
そして、人脈を増やして行けたらと思います。

 

（おまけ）

今回なぜか、キーボード欲しい欲が急に高まり、YouTubeで色々みてしまいました…笑

気になったのは静電容量無接点のREALFORCとHHKB…

どちらも高級キーボードですね！

見た目的にはHHKBの方がコンパクトだし、何よりBluetoothが使えて、机上がコンパクトになる！

しかし、MacBookとのキー配列がかなり異なるため、常にこのキーボードが使える環境ではないと頭の切り替えが大変そう…

そうなると、よくWeb制作系の内容で参考にしているエンジニアさん2名が使用していたREALFORCEが気になりました。

HHKBはキー荷重が45g、私がよく見ているエンジニアさんは2人ともREALFORCEの30gを使用されていました。

軽い方がいいのかな…？？

HHKBはなかなか家電量販店などには置いてない様ですが、REALFORCEは置いてあるのかな？？
いつか遠出して30gと45gの違いを体感しに行こうかな…

今時はキーボードもレンタルできるみたいですね！

いい時代だなぁと痛感します笑

 

最後まで読んでいただきありがとうございました！！

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

Goose houseチャンネルが更新されて感じたこと

次の記事

今日の植物 2021.4