月曆畫面(左欄今日+右欄月曆表格)
在這個教學中，我們直接拿月曆右欄-月曆表格來進行移植的動作，下載月曆右欄-月曆表格解開，並在主題目錄中把css與images二個目錄建出來，把檔案上載上去，整個目錄的結構如下所示：
下圖是查看後的網頁畫面，只有文字內容，格式、圖檔都有問題，這表示格式與圖檔的目錄是錯誤的，底下，我們來處理目錄的問題。(這個問題是出自於WordPress的網頁路由有一套自己的作法，我們必須調整目錄指定的方式。)
檢視網頁原始碼，檢查一下外部css與images檔案的目錄是否正確：
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/current-day.css"> <link rel="stylesheet" href="css/calendar.css"> <link rel="icon" href="images/icon1.png" type="image/png" sizes="72x72">
將其中一個超連結複製出來檢查：
http://u1085100.stu.fgchen.com/wp_dev/css/main.css
上面的目錄是錯誤的，我們的主題目錄結構應該是：
也就是說，main.css的完整目錄應該是：
http://u1085100.stu.fgchen.com/wp_dev/wp_content/themes/mytheme/css/main.css
對照一下，目錄少了：http://u1085100.stu.fgchen.com/wp_dev/wp_content/themes/mytheme/
由於這個目錄是跟著每一個主題變動的，我們可以用寫死的方式把完整目錄寫好，不過，這種寫法絕對是不推薦的！
我們要做的方式就是透過WordPress內建的函式get_stylesheet_directory_uri來取得主題所在的目錄(動態)，並將取得的目錄加到原本的路徑中，作法是將外部檔案的目錄改寫為：
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/main.css'; ?>"> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/current-day.css'; ?>"> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/calendar.css'; ?>"> <link rel="icon" href="<?php echo get_stylesheet_directory_uri().'/images/icon1.png'; ?>" type="image/png" sizes="72x72">
另外，便利貼那邊的圖檔目錄也要跟著改：
<td class="tooltip">1 <img src="<?php echo get_stylesheet_directory_uri().'/images/note2.png'; ?>" alt="記事"><span>這是提示！！！</span></td>
註：
- 要在HTML中插入 PHP程式碼是使用<?PHP 裏面是PHP程式碼 ?>標籤。
- 所有 PHP 的變數是用$開頭。
- echo是印出資料(變數、字串等)。
- PHP的字串相接是用逗點。
同學可以速查一下PHP的語法。
改完後，我們可得到正確的畫面：(做到這邊，同學可以思考一下，怎麼把之前抓登入使用者名稱的資料用來改掉My Calendar？例：”陳富國的月曆”。)
後記：把一個月曆Web應用直接搬過來是很簡單的，只是，之後，我們要考慮導入較複雜的網頁頁面結構(header、導覽列、主要內容區、邊框、footer)，將月曆再包裝成一個靜態頁面，或者之後，將月曆寫在一個外掛中，透過shortcode讓頁面設計者可以將月曆嵌在一個頁面中。(大家要努力把WordPress整體架構搞清楚 –> 我正在做的事。)