變身多人使用月曆-theme部份
在這裏的教學,我們要使用WordPress會員系統融入月曆中,使得月曆可以支援多人使用(自己的主題、自己的記事資料)
我們先在WordPress後台增加一個使用者,,可以看到資料表格資料如下:
接著,我們處理月曆的theme這個資料表格,新增一個欄位user_login,類型參考WordPress的users資料表格:
新增資料並將使用者的登入名稱加入:
資料處理好之後,我們再來處理程式中關於theme後端資料表格的操作。
程式有幾個邏輯:
index.php 中的 script段

資料庫表格的處理
我們打開WordPress的使用者資料表格,這邊,我們要使用user_login這個欄位,做為使用者的辨識。



第一部份 讀取theme
若使用者沒有登入,我們用預設的theme:bluecurrentColor.name = "blue";登入後,至資料表格中取得theme欄位資料,這個之前有點不一樣,我們在查詢表格時,要加上where user_login = ???? 條件。
currentColor.name = <?php echo(json_encode(setTheme())); ?> ; //js_encode將回傳的資料包裝成JSON編碼字串,然後指定給currentColor.name
<script> var stylesheet_directory = "<?php echo get_stylesheet_directory_uri(); ?>" ; <?php global $current_user; wp_get_current_user(); if ( is_user_logged_in() ) { //如果WordPress使用者有登入的話 echo "var currentUserLoigin = ".'"'.$current_user->user_login.'";'."rnt"; echo "var currentUserDisplayName = ".'"'.$current_user->display_name.'";'."rnt"; } ?> if (typeof currentUserDisplayName !== 'undefined') { //若currentUserDisplayName不是未定義的話,表示使用者是登入的 document.getElementById("app-name-landscape").innerHTML = currentUserDisplayName; document.getElementById("app-name-portrait").innerHTML = currentUserDisplayName; currentColor.name = <?php echo(json_encode(setTheme())); ?> ; //js_encode將回傳的資料包裝成JSON編碼字串,然後指定給currentColor.name } else { //使用者未登入,使用預設的藍色主題 currentColor.name = "blue"; } let today = new Date(); //新增一個Date物件,命名為today let thisYear = today.getFullYear(); let thisMonth = today.getMonth(); let thisDate = today.getDate(); updateDates(); fillInMonth(thisYear, thisMonth, thisDate); </script>修改index.php中的setTheme函式
//讀取theme表格中的色彩名稱 function setTheme(){ //呼叫wp_get_current_user方法得WordPress的使用者資料,並放入$current_user這個全域變數中 global $current_user; wp_get_current_user(); global $connection; //使用where子句查詢登入的使用者資料列 $query = "SELECT * FROM theme where user_login = '$current_user->user_login'"; $result = mysqli_query($connection, $query); if(!$result){ die("Something went wrong...`"); } while($row = mysqli_fetch_assoc($result)){ return $row['cur_theme']; } }原本的setTheme方法(供對照)
//讀取theme表格中的色彩名稱 function setTheme(){ global $connection; $query = "SELECT * FROM theme"; $result = mysqli_query($connection, $query); if(!$result){ die("Something went wrong...`"); } while($row = mysqli_fetch_assoc($result)){ return $row['cur_theme']; } }
第二部份 設定theme
更新資料加上where user_login = ???? 條件子句,有使用者有登入的話,就會查到使用者資料列,並更新該登入者的資料列,若未登入的話,會找不到資料,不會進行任何資料的更新。
修改index.php中的updateTheme
// 更新theme表格中的cur_theme欄位的資料 function db_updateTheme($newTheme){ //呼叫wp_get_current_user方法得WordPress的使用者資料,並放入$current_user這個全域變數中 global $current_user; wp_get_current_user(); global $connection; //使用where條件找出登入的使用者的資料列的cur_theme欄位值為$newTheme $query = "UPDATE theme SET cur_theme = '$newTheme' where user_login = '$current_user->user_login'"; $result = mysqli_query($connection, $query); //送出SQL查詢 if(!$result){ //查詢失敗的話… die("Query failed: " . mysqli_error($connection)); } }原本updateTheme方法(供對照)
// 更新theme表格中的cur_theme欄位的資料 function db_updateTheme($newTheme){ global $connection; $query = "UPDATE theme SET cur_theme = '$newTheme' WHERE id = 1"; //更新theme資料表格中,id欄位值為1的資料列中的cur_theme欄位值為$newTheme $result = mysqli_query($connection, $query); //送出SQL查詢 if(!$result){ //查詢失敗的話… die("Query failed: " . mysqli_error($connection)); } }