石垣島観光ガイド
制作日 2022年 9月 wordpress化-sample
Web Site
Study Work
No.002
- 制作時間
- 約 4 時間 (WordPress化)
- 使用言語
- HTML、CSS、jQuery、php
- 使用ツール
- VS Code、Local by Flywheel、WordPress
- ページ構成
- トップページのみ
- 制作内容
-
- オリジナルテーマとサムネイル画像の設定
- カスタムヘッダー画像とカスタム背景色の設定
- 投稿ページ作成
- プラグインのインストール
- インポート・エクスポート
- 演習目的
- WordPress・PHP練習
その他 SASS、Mobile First - ＼ 制作時のポイント ／
-
Local by Flywheel を使用してローカル環境で、htmlとcssで作成し たサイトに php のコードで書換えることによって、 WordPress でもコンテンツ記事の編集を可能にした。
WordPress 化
PHP
- Local by Flywheelを使用してローカル環境で作成。
- コンテンツをWordPressの投稿ページで編集できるようにした。
-
index.php
-
style.css ( index.phpと同じ階層 ）
-
header.php
-
footer.php
-
functions.php
-
style.css
Mobile First
PHP
- Mobile FirstでWebサイトを作成
-
index.html
-
style.css
SASS
SCSS記法
- HTMLファイルは Mobile First と同じなので省略。
-
style.scss
-
reset.scss
-
common.scss
-
index.scss
-
header.scss
-
main.scss
-
footer.scss
-
style.css ( scssからコンパイルされたファイル ）