月曆畫面移植(主題對話、記事資料對話等)
- 下載 “13. 月曆- 記事資料處理 20210317“，解壓縮，整理在一個資料中：
- 將index.html更名成index.php
- 準備screenshot.png跟style.css
- 修改style.css中的Theme Name，之後方便在外觀管理中分辨撰寫的主題。
- 將整個 mycalendar13上傳至themes資料夾
- 啟用主題
- 打開首頁，格式不正確，原因css、images與js的外部檔案路徑需進行修改。
- index.php中的head段中css與images路徑的修改
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/modal.css'; ?>"> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/portrait.css'; ?>"> <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri().'/css/calendar-border.css'; ?>"> <link rel="icon" href="images/icon1.png" type="<?php echo get_stylesheet_directory_uri().'/image/png'; ?>" sizes="72x72"> <script src="https://kit.fontawesome.com/e45ac9a14a.js" crossorigin="anonymous"></script> <title>My Calendar</title> <style> </style> </head>
- 設計時，預設一個表格中的記事圖貼也需修改：
<td class="tooltip" onclick="dayClicked(this);">1 <img src="<?php echo get_stylesheet_directory_uri().'/images/note2.png'; ?>" alt="記事"><span>這是提示！！！</span></td>
- js外部檔案路徑
<script src="<?php echo get_stylesheet_directory_uri().'/js/updateDate.js'; ?>"></script> <script src="<?php echo get_stylesheet_directory_uri().'/js/changeTheme.js'; ?>"></script> <script src="<?php echo get_stylesheet_directory_uri().'/js/postIts.js'; ?>"></script>
- 改完後，可以得到完整功能的月曆，可以進行主題色彩選取與記事資料處理。
- 上面的畫面，還有一個問題，就是新增記事資料後，因為圖檔路徑問題造成記事圖貼有破圖的問題，新增記事的圖貼程式碼是在js/updateDate.js，下面程式碼部份也有跟記事圖貼檔案有關的敘述：
//記事圖示與ToolTip處理
function appendSpriteToCellAndTooltip(uid, elem){
for(let i = 0; i < postIts.length; i++){
if(uid == postIts[i].id){
elem.innerHTML += `<img src='images/note${postIts[i].note_num}.png' alt='A post-it note'>`;
elem.classList.add("tooltip");
elem.innerHTML += `<span>${postIts[i].note}</span>`;
}
}
}
問題是如果嵌入PHP程式碼，程式碼的副檔名需要改成php(我這邊還沒測試是否能改js副檔名)，我先維持js副檔名，不改，所以，我們在index.php中取得主題的路徑，設為JavaScript的全域變數，那麼我們就能在上面的JS程式碼取得該路徑。
在index.php的script段中：
<script> //取得主題所在的路徑 var stylesheet_directory = "<?php echo get_stylesheet_directory_uri();?>"; let today = new Date(); //新增一個Date物件，命名為today let thisYear = today.getFullYear(); let thisMonth = today.getMonth(); let thisDate = today.getDate(); updateDates(); fillInMonth(thisYear, thisMonth, thisDate); </script>修改在js/updateDate.js中的appendSpriteToCellAndTooltip函式，我們用樣板字串嵌入stylesheet_directory變數。
//記事圖示與ToolTip處理
function appendSpriteToCellAndTooltip(uid, elem){
for(let i = 0; i < postIts.length; i++){
if(uid == postIts[i].id){
elem.innerHTML += `<img src='${stylesheet_directory}/images/note${postIts[i].note_num}.png' alt='A post-it note'>`;
elem.classList.add("tooltip");
elem.innerHTML += `<span>${postIts[i].note}</span>`;
}
}
}
於是，完整的月曆記事就完美呈現出來了。
