文章教學

專業文章教學,幫助初學架設網站

申請和啟用 Gmail API 的 OAuth 2.0 憑證方法

申請和啟用 Gmail API 的 OAuth 2.0 憑證方法

當我們想要使用免費又好用的寄信伺服器,很多人會使用gmail來操作。

那網站要如何和gmail做結合,那就申請gmail API

申請網址

到主頁https://console.cloud.google.com/

建立專案

messageImage 1593051744453

messageImage 1593051762521

messageImage 1593051858033

搜尋gmail API

gmail 1

gmail 2

gmail 3gmail 4

建立憑證

woocommerce改變欄位名稱

woocommerce改變欄位名稱

我們今天想把地址的欄位名稱,改為更具體的名字:詳細收件地址,一樣找到 woocommerce_billing_fields,指定欄位名billing_address_1,把它的屬性 label 改為「行動電話」,記得因為名稱是字串的形式,一定要加引號,而必填屬性為布林值,所以 true 或 false 不用加引號

改變欄位名稱


  1. /**改變欄位名稱**/  
  2.   
  3. add_filter( 'woocommerce_billing_fields', 'custom_billing_phone_label' );   
  4. function custom_billing_phone_label($fields) {   
  5. $fields['billing_address_1'] = array(   
  6. 'label'=>"詳細收件地址"  
  7. );   
  8. return $fields;   
  9. }  

所有文章

woocommerce下拉選單帶入郵遞區號、縣市

woocommerce下拉選單帶入郵遞區號、縣市

WooCommerce原始的結帳欄位位置不符合台灣人習慣,需要配合欄位調整外掛來變更欄位排序。

最適合台灣地址輸入習慣,就是將縣市還有鄉鎮市變成下拉選單,郵遞區號會自動對應,綠界或藍新也可以用這個程式碼,唯一的缺點就是欄位的CSS外型可能跑掉,需要再手動調整CSS。

在主題的functions內下方加入以下程式碼

1、郵遞區號輸入後會自動帶入縣/市地區,或是由縣/市欄位的選擇而動態載入郵遞區號
2、鄉鎮市欄位會隨著縣/市的選擇而動態變更,自動帶入該縣/市所屬之地區
3、偵測用戶裝置的地理位置,自動帶入縣市地區資料

地區資料的部份主要使用 essoduke 大大所開發維護的台灣地區資料清單,只要載入已經製做好的地區資料,就能在下拉選單中看到相對應的縣市,程式碼範例如下:

 帳單地址與運送地址下拉選單功能


  1. /**帳單地址與運送地址下拉選單功能**/  
  2. add_filter("woocommerce_after_checkout_form""twzipcodefield_shipping");   
  3. function twzipcodefield_shipping() {   
  4. $output = '   
  5. <script src="https://hellowp.cc/jquery.twzipcode-1.7.14.min.js"></script>   
  6. <script>   
  7. var $ = jQuery.noConflict();   
  8. function updateValue(field){   
  9. $("#"+field+"_state").val($(".woocommerce-"+field+"-fields select[name=\'county\']").val());   
  10. $("#"+field+"_city").val($(".woocommerce-"+field+"-fields select[name=\'district\']").val());   
  11. $("#"+field+"_postcode").val($(".woocommerce-"+field+"-fields input[name=\'zipcode\']").val());   
  12. }   
  13. $(document).ready(function(){   
  14. $(".woocommerce-billing-fields,.woocommerce-shipping-fields").twzipcode({   
  15. "detect": function (coords) {   
  16. updateValue("billing");   
  17. updateValue("shipping");   
  18. }   
  19. });   
  20. function updateField(field){   
  21. $(".woocommerce-"+field+"-fields select[name=\'county\']").appendTo($("#"+field+"_state_field"));   
  22. $(".woocommerce-"+field+"-fields select[name=\'district\']").appendTo($("#"+field+"_city_field"));   
  23. $(".woocommerce-"+field+"-fields input[name=\'zipcode\']").appendTo($("#"+field+"_postcode_field"));   
  24. }    
  25. updateField("billing");   
  26. updateField("shipping");   
  27. $("select[name=\'county\'],select[name=\'district\']").change(function(){updateValue("billing");updateValue("shipping");})   
  28. $("input[name=\'zipcode\']").keyup(function(){updateValue("billing");updateValue("shipping");})   
  29. $("#billing_postcode,#billing_state,#billing_city,#shipping_state,#shipping_city,#shipping_postcode").hide();   
  30. })   
  31. </script>';   
  32. echo $output;   
  33. }  

僅有帳單地址有下拉選單功能


  1.   
  2. /**僅有帳單地址有下拉選單功能**/  
  3. add_filter("woocommerce_after_checkout_form""twzipcodefield_shipping");   
  4. function twzipcodefield_shipping() {   
  5. $output = '   
  6. <script src="https://hellowp.cc/jquery.twzipcode-1.7.14.min.js"></script>   
  7. <script>   
  8. var $ = jQuery.noConflict();   
  9. function updateValue(field){   
  10. $("#"+field+"_state").val($(".woocommerce-"+field+"-fields select[name=\'county\']").val());   
  11. $("#"+field+"_city").val($(".woocommerce-"+field+"-fields select[name=\'district\']").val());   
  12. $("#"+field+"_postcode").val($(".woocommerce-"+field+"-fields input[name=\'zipcode\']").val());   
  13. }   
  14. $(document).ready(function(){   
  15. $(".woocommerce-billing-fields").twzipcode({   
  16. "detect": function (coords) {   
  17. updateValue("billing");   
  18.   
  19. }   
  20. });   
  21. function updateField(field){   
  22. $(".woocommerce-"+field+"-fields select[name=\'county\']").appendTo($("#"+field+"_state_field"));   
  23. $(".woocommerce-"+field+"-fields select[name=\'district\']").appendTo($("#"+field+"_city_field"));   
  24. $(".woocommerce-"+field+"-fields input[name=\'zipcode\']").appendTo($("#"+field+"_postcode_field"));   
  25. }    
  26. updateField("billing");   
  27. $("select[name=\'county\'],select[name=\'district\']").change(function(){updateValue("billing");})   
  28. $("input[name=\'zipcode\']").keyup(function(){updateValue("billing");})   
  29. $("#billing_postcode,#billing_state,#billing_city").hide();   
  30. })   
  31. </script>';   
  32. echo $output;   
  33. }   
  34.   
WooCommerce將金額設置成「100元」以及WooCommerce關閉貨幣符號隱藏貨幣符號

WooCommerce將金額設置成「100元」以及WooCommerce關閉貨幣符號隱藏貨幣符號

放在你主題的.css裡面

可能是style.css

WooCommerce將金額設置成「100元」


  1. /*-- 隱藏原本金額前面的NT$ --*/  
  2. .woocommerce-Price-currencySymbol {   
  3. display: none;   
  4. }   
  5.   
  6. /*-- 增加「元」這個字到金額後面 --*/  
  7. span.woocommerce-Price-amount.amount::after {   
  8. content: '元';   
  9. }   

WooCommerce關閉貨幣符號

  1. /*-- 隱藏 金額前面的匯率符號 --*/  
  2. .woocommerce-Price-currencySymbol {   
  3. display: none;   
  4. }   
  5.   
  6. .price .woocommerce-Price-currencySymbol {   
  7.         display:none !important;}  
用CSS的cursor 語法,變更滑鼠游標的形狀

用CSS的cursor 語法,變更滑鼠游標的形狀

在網頁裡面,我們可能需要改變CSS裡面的寫法是

 

  1. .cursor{   
  2.     cursor: help;   
  3. }  

 

.myMOUSE{ cursor: auto; }
.myMOUSE{ cursor: crosshair; }
.myMOUSE{ cursor: default; }
.myMOUSE{ cursor: e-resize; }
.myMOUSE{ cursor: help; }
.myMOUSE{ cursor: move; }
.myMOUSE{ cursor: n-resize; }
.myMOUSE{ cursor: ne-resize; }
.myMOUSE{ cursor: nw-resize; }
.myMOUSE{ cursor: pointer; }
.myMOUSE{ cursor: progress; }
.myMOUSE{ cursor: s-resize; }
.myMOUSE{ cursor: text; }
.myMOUSE{ cursor: w-resize; }
.myMOUSE{ cursor: wait; }
.myMOUSE{ cursor: inherit; }
網頁要如何 rwd 語法Responsive Web Design 自適應網站

網頁要如何 rwd 語法Responsive Web Design 自適應網站

很簡單,需要在網頁的<head></head>

裡面增加,這段語法

rwd-html代碼語法


  1. <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">  

 告訴不同裝置、不同尺寸,有不同的語法

在增加這段代碼,讓圖片適應網頁尺寸

圖片自動適應寬度代碼


  1. img {   
  2. heightauto;   
  3. max-width: 100%;   
  4. }  
如何防止joomla JCE 刪除某些標籤,譬如

如何防止joomla JCE 刪除某些標籤,譬如

編輯器中的全局配置然後

設置一個自訂組態變數

Key『remove_trailing_brs』

Value『false』

 

現在,它應該保留單個<br />標記。

聯繫我們

請輸入您的全名。
無效的電子信箱。
請輸入主題
請輸入消息
Invalid Input
Invalid Input