WordPress Make&サポート中小企業診断士「Weber」電話問い合わせバナー 問い合わせメール

Web中小企業診断士

~WordPressとWebマーケティングにご興味がある方向けのサイトです~

ホームページ制作 補助金関係

イタリアンホームページ完成(飲食事業者向け経営基盤強化支援事業)

2024/04/16

1 制作の経緯

先輩診断士の先生にご紹介いただいた「一汁三菜イタリア~の」 様(中央区八丁堀)からの再度ご依頼をいただくことができました。旧サイト制作から、5年ほどがたち、そろそろ独自ドメインをとって、ホームページをリニューアルをされたいとのご要望で、有難いことにでした。
資金源は、飲食事業者向け経営基盤強化支援事業を実施したので、その助成金も充当されるとのことでした。 

2 以前のサイトからの変更点

「このようなサイトに似せて救って欲しい」 というご要望をいただき、そのサイトのソースコード(html,css,Jquery)を分析し、似せられるようにしました。
具体的には
①サイト全体のメニュー
②各ページのレイアウト構造
③各ページで使われているJqueryのアニメーション

のソースコードを分析し、カスタマイズする形で作り直させていただきました。 

3 技術的レベルアップ

(1)既存のstyle.cssとのclassIdの重複を避ける

管理画面(ダッシュボード)における機能が充実している(ブログ機能等)既存のWordPressテーマ(stinger+)を使いたかったので、元々あるCSS等と重複しないように設定するのに苦労しました。具体的には、stinger+のテーマで使われているデフォルトのCSSとclass名やidが重複 すると、デフォルトのレイアウトが指定されてしまい、崩れた全レイアウトとなるので、それを避けるのに苦労しました。行った対策は、class名を一部変えるか、既存のテーマにあるstyle.cssにあるclassを表示させないように消すなどの作業を行いました。今後はSCSS( CSSの親戚みたいなプログラム言語)を使って各classやidが特定できるよう、全てに親要素をつけて、実施していければ、うまくいくというようでした。 

(2)お問い合わせ機能はWordPressプレス特有のショートコードを使う

お問い合わせ機能はWordPressでは、Contact Form 7を使っていますが、レイアウト設定を変えて使う場合には、併せてショートコード[ ] を使っていかないと機能しないので、その点について苦労しました。 

(3)Jqueryを動かすための精緻な取り組み

Jqueryを動かす為には 

header.php、footer.php、style.css,jqueryフォルダー、固定ページ(html)などへソースコードと記述が必要 です。その際に、JqueryのCDN(Contents Delivery Network)、CSSのCDN(Contents Delivery Network)、追加CSSの記載などが必要です。この設定がとても難しいです。具体的には、どの順番でそどの場所にコードを記載すれば良いのか?(Jqueryの前に個別のJqueryを書いても動きません。)又、そのディレクトリーをしっかりと階層を指定して、動くようにheader.phpに記載するすること。さらに、発火点となる条件を指定したclassやid をしっかりと、html内、Jquery内、css内でしっかり連携させることなどが精緻で、難しかったですです。※ Jquery必要なもの

4 全ページ紹介

(1)トップページ 

(2)一汁三菜イタリア~のとは

(3)ランチコース

(4)ディナーコース

(5)テイクアウト

(6)店内の様子

以前  

5 まとめ

今回は、複数のJqueryを使った面白みのあるサイトにできたのではないかと思います。
ブログやSNSとの連携もしっかり使っていただき、有効にご活用いただけるよう、サポートをしていきたいと思います。

-ホームページ制作, 補助金関係