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

靜態網頁三劍客素材

• github下載 https://github.com/LearnWebCode/university-static
  
• DownZip後解壓縮，就可以開index.html來瞧瞧

WordPress自製主題

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

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

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

比對三劍客與自製主題

• 可參考Day03 Codeing三部曲與Sublime祕技

觀察重點 php()函數

• wordpress.org官網:函數參考
  

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·羅傑!