iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 29
1

今天要試著將靜態網頁,裡面的HTML、CSS、Javascript打包成一個WorldPress自製主題,可以進一步了解PHP與這三劍客合作的緊密關係!讓我們繼續看下去。


靜態網頁三劍客素材

WordPress自製主題

  • 修改完成後的檔案Dorpbox下載zip
    • 上方_MACOSX給Mac使用,下方給Windows

將WordPress自製主題放到正確路徑資料夾

  • 預設C:\xampp\htdocs\wp-content\themes\
  • 開啟localhost wordpress後台就可以看到

比對三劍客與自製主題

觀察重點php()函數

index.html轉成php

  • 抓主題需要檔案 get_theme_file_uri()函數
<?php echo get_theme_file_uri('/images/library-hero.jpg') ?>
  • Include函數
<?php
get_header();
get_footer();
?>

function.php 載入外部檔案

wp_enqueue_script(),載入Javascript

  • microtime()是試測時的小訣竅,為了可以讓瀏覽器再次載入,避免Caching錯誤
<?php
wp_enqueue_script('main-university-js', get_theme_file_uri('/js/scripts-bundled.js'), NULL, microtime(), true);
?>

wp_enqueue_style(),載入CSS

  • 載入google字型
<?php
wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
?>
  • 載入font-awesome社群字型圖案
<?php
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
?>

總結

開個自製主題內容的大坑,目前展示的只是初步階段,將靜態內容打包,還沒變成為動態連結資料庫,有興趣可以參考上方github作者@LearnWebCode,有更進一步的影片教學。
另外還可以朝自製外掛錢進,「想要我的財寶嗎?想要就都給你吧,去找吧!我把世界上的一切的放在了那裡……」-OnePiece哥爾·D·羅傑!


上一篇
Day28 WordPress 終極網站規劃清單 與一頁式網站!
下一篇
Day30 PHP鐵人大補帖與心得分享
系列文
30天翻玩動態網站-會員需驗證才能看到部落格文章 30

尚未有邦友留言

立即登入留言