

<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>wordpress &#8211; Max的每一天</title>
	<atom:link href="https://max-everyday.com/tag/wordpress/feed/" rel="self" type="application/rss+xml" />
	<link>https://max-everyday.com</link>
	<description>認真過每一天、快樂過每一天</description>
	<lastBuildDate>Tue, 31 Aug 2021 14:59:26 +0000</lastBuildDate>
	<language>zh-TW</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.2</generator>

<image>
	<url>https://max-everyday.com/wp-content/uploads/2020/02/ic_launcher_round_2020-003.png</url>
	<title>wordpress &#8211; Max的每一天</title>
	<link>https://max-everyday.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>css如何實作網頁右上角選單效果</title>
		<link>https://max-everyday.com/2020/02/css-auto-show-hide-menu-icon/</link>
					<comments>https://max-everyday.com/2020/02/css-auto-show-hide-menu-icon/#respond</comments>
		
		<dc:creator><![CDATA[Max]]></dc:creator>
		<pubDate>Fri, 07 Feb 2020 21:36:20 +0000</pubDate>
				<category><![CDATA[電腦相關應用]]></category>
		<category><![CDATA[MaxCodeReview]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">https://max-everyday.com/?p=10365</guid>

					<description><![CDATA[Max的網站，最近換了一個新的主題，發現在 chrome 瀏覽器裡主選單沒有被顯示出來。 發生的原因：css 裡 em 和 px 的轉換不一致所造成，Google一下 e [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>Max的網站，最近換了一個新的主題，發現在 chrome 瀏覽器裡主選單沒有被顯示出來。</p>



<p>發生的原因：css 裡 em 和 px 的轉換不一致所造成，Google一下 em 轉 px 應該是 1em=16px，但實際測試在 macOS 裡的 chrome 居然是 1em=20px。</p>



<p>影片說明：<br><a href="https://youtu.be/CJ_YEo3Uv3g">https://youtu.be/CJ_YEo3Uv3g</a></p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<div class="gutenbee-responsive-embed"><iframe title="css如何實作網頁右上角選單效果" width="885" height="498" src="https://www.youtube.com/embed/CJ_YEo3Uv3g?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div></figure>



<p>瀏覽器的實測結果：</p>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="1034" height="1360" src="https://max-everyday.com/wp-content/uploads/2020/02/Screen-Shot-2020-02-08-at-04.53.07-down.jpg?v=1581109063" alt="" class="wp-image-10368" srcset="https://max-everyday.com/wp-content/uploads/2020/02/Screen-Shot-2020-02-08-at-04.53.07-down.jpg?v=1581109063 1034w, https://max-everyday.com/wp-content/uploads/2020/02/Screen-Shot-2020-02-08-at-04.53.07-down-380x500.jpg?v=1581109063 380w, https://max-everyday.com/wp-content/uploads/2020/02/Screen-Shot-2020-02-08-at-04.53.07-down-779x1024.jpg?v=1581109063 779w" sizes="(max-width: 1034px) 100vw, 1034px" /></figure>



<p>解法：把 64em 改用 1024px 。</p>



<p>會去用em 應該是有原因的，但目前不同瀏覽器對em的定義似乎不太一致，所以做出來的網頁在不同瀏覽器的效果會有所差別。</p>



<p>沒想到會來研究css，多學一點也滿好的，可以自己幫自己解決問題。</p>



<hr class="wp-block-separator"/>



<p>附上測試用的網頁：</p>



<pre class="wp-block-preformatted">&lt;html&gt;
 &lt;body&gt;
 &lt;div style="box-sizing: border-box;
     width: <strong>64em</strong>;    background: #fff3d4;
     border-color: #f6b73c;"&gt;hello 64em&lt;/div&gt;
 &lt;hr/&gt;
 &lt;div style="box-sizing: border-box;
     width: <strong>1024px</strong>;    background: #fff3d4;
     border-color: #f6b73c;"&gt;hello 1024px&lt;/div&gt;
 &lt;hr/&gt;
 &lt;div style="box-sizing: border-box;
     width: <strong>51.2em</strong>;    background: #fff3d4;
     border-color: #f6b73c;"&gt;hello 51.2em&lt;/div&gt;
 &lt;/body&gt;
 &lt;/html&gt;</pre>



<hr class="wp-block-separator"/>



<p>css如何實作網頁右上角選單效果：</p>



<pre class="wp-block-preformatted">@media print, screen and (min-width: 1024px) {
   .hide-for-large {
     display: none !important; } }
</pre>



<p>程式碼說明：</p>



<p>當符合最小寬度1024px（等於：螢幕寬度為 1024px 以上）執行括號內的設定值。</p>



<p>倒過來的範例：</p>



<pre class="wp-block-preformatted">@media screen and (max-width: 1024px) {
   .show-for-large {
     display: none !important; } }</pre>



<p>程式碼說明：</p>



<p>當符合最大寬度1024px（等於：螢幕寬度為 1024px 以下）執行括號內的設定值。</p>



<hr class="wp-block-separator"/>



<h2 class="wp-block-heading">相關文章：</h2>



<p>Day22：小事之 Media Query<br><a href="https://ithelp.ithome.com.tw/articles/10196578">https://ithelp.ithome.com.tw/articles/10196578</a></p>



<p>CSS Media Queries 詳細介紹<br><a href="https://www.oxxostudio.tw/articles/201810/css-media-queries.html">https://www.oxxostudio.tw/articles/201810/css-media-queries.html</a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://max-everyday.com/2020/02/css-auto-show-hide-menu-icon/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>不用寫程式，自動推播WordPress貼文到Telegram</title>
		<link>https://max-everyday.com/2020/02/wordpress-auto-push-telegram/</link>
					<comments>https://max-everyday.com/2020/02/wordpress-auto-push-telegram/#respond</comments>
		
		<dc:creator><![CDATA[Max]]></dc:creator>
		<pubDate>Wed, 05 Feb 2020 21:52:53 +0000</pubDate>
				<category><![CDATA[電腦相關應用]]></category>
		<category><![CDATA[macOS]]></category>
		<category><![CDATA[telegram]]></category>
		<category><![CDATA[Windows]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">https://max-everyday.com/?p=10344</guid>

					<description><![CDATA[慈濟要棄守LINE官方帳號投向Telegram懷抱，未來使用Telegram的用戶應該會愈來愈多，今天Max要分享，如何不寫一行程式，完成自動推播WordPress貼文到 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>慈濟要棄守LINE官方帳號投向Telegram懷抱，未來使用Telegram的用戶應該會愈來愈多，今天Max要分享，如何不寫一行程式，完成自動推播WordPress貼文到Telegram。</p>



<p>影片教學：<br><a href="https://youtu.be/1PBfYuykjL0">https://youtu.be/1PBfYuykjL0</a></p>



<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<div class="gutenbee-responsive-embed"><iframe title="不用寫程式，自動推播WordPress貼文到Telegram" width="885" height="498" src="https://www.youtube.com/embed/1PBfYuykjL0?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
</div></figure>



<hr class="wp-block-separator"/>



<h2 class="wp-block-heading">圖文攻略：</h2>



<p>Step 1：安裝外掛 WP Telegram</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="425" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h31m41s732-1024x425.jpg" alt="" class="wp-image-10345" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h31m41s732-1024x425.jpg?v=1580939384 1024w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h31m41s732-500x207.jpg?v=1580939384 500w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h31m41s732-1536x637.jpg?v=1580939384 1536w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h31m41s732-2048x849.jpg?v=1580939384 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<hr class="wp-block-separator"/>



<p>Step 2：在外掛的設定的介面裡點擊&#8221;BotFather&#8221; 的超連結，和BotFather對話</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="1024" height="636" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m06s890-1024x636.jpg" alt="" class="wp-image-10346" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m06s890-1024x636.jpg?v=1580939387 1024w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m06s890-500x310.jpg?v=1580939387 500w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m06s890-1536x954.jpg?v=1580939387 1536w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m06s890-200x125.jpg?v=1580939387 200w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m06s890.jpg?v=1580939387 1870w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<hr class="wp-block-separator"/>



<p>Step 3：使用 /newbot 指令，建立bot，並取得 token，並把token輸入到外掛設定的Token欄位裡。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="718" height="1024" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m15s027-718x1024.jpg" alt="" class="wp-image-10347" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m15s027-718x1024.jpg?v=1580939389 718w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m15s027-350x500.jpg?v=1580939389 350w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m15s027.jpg?v=1580939389 869w" sizes="(max-width: 718px) 100vw, 718px" /></figure>



<hr class="wp-block-separator"/>



<p>Step 4：建立一個Channel，並點 Add Admin 邀請 maxeverydaybot 來當管理員。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="715" height="1024" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m06s476-715x1024.jpg" alt="" class="wp-image-10349" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m06s476-715x1024.jpg?v=1580939392 715w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m06s476-349x500.jpg?v=1580939392 349w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m06s476.jpg?v=1580939392 865w" sizes="(max-width: 715px) 100vw, 715px" /></figure>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="723" height="1024" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m29s362-723x1024.jpg" alt="" class="wp-image-10350" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m29s362-723x1024.jpg?v=1580939393 723w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m29s362-353x500.jpg?v=1580939393 353w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h33m29s362.jpg?v=1580939393 877w" sizes="(max-width: 723px) 100vw, 723px" /></figure>



<hr class="wp-block-separator"/>



<p>Step 5：在外掛的第二個設定畫面「文章通知」裡，點擊MyChatInfoBot，開始和MyChatInfoBot對話。</p>



<p>Step 6：在建立的Channel 裡隨手發佈一段文字，並轉發給MyChatInfoBot 即可取得 chat ID，並把 chat ID 輸入進「TELEGRAM 目的地」欄位。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="722" height="1024" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m48s079-722x1024.jpg" alt="" class="wp-image-10348" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m48s079-722x1024.jpg?v=1580939390 722w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m48s079-352x500.jpg?v=1580939390 352w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h32m48s079.jpg?v=1580939390 871w" sizes="(max-width: 722px) 100vw, 722px" /></figure>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="719" height="1024" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h34m57s551-719x1024.jpg" alt="" class="wp-image-10351" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h34m57s551-719x1024.jpg?v=1580939394 719w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h34m57s551-351x500.jpg?v=1580939394 351w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h34m57s551.jpg?v=1580939394 870w" sizes="(max-width: 719px) 100vw, 719px" /></figure>



<hr class="wp-block-separator"/>



<p>Step 7：完成了。接下來在WordPress裡發佈的文章，就會自動推播通知到Telegram裡了。</p>



<figure class="wp-block-image"><img loading="lazy" decoding="async" width="722" height="1024" src="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h35m12s353-722x1024.jpg" alt="" class="wp-image-10352" srcset="https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h35m12s353-722x1024.jpg?v=1580939395 722w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h35m12s353-353x500.jpg?v=1580939395 353w, https://max-everyday.com/wp-content/uploads/2020/02/vlcsnap-2020-02-06-05h35m12s353.jpg?v=1580939395 874w" sizes="(max-width: 722px) 100vw, 722px" /></figure>
]]></content:encoded>
					
					<wfw:commentRss>https://max-everyday.com/2020/02/wordpress-auto-push-telegram/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>自己設計問卷</title>
		<link>https://max-everyday.com/2019/12/survey-diy/</link>
					<comments>https://max-everyday.com/2019/12/survey-diy/#respond</comments>
		
		<dc:creator><![CDATA[Max]]></dc:creator>
		<pubDate>Wed, 25 Dec 2019 17:17:05 +0000</pubDate>
				<category><![CDATA[生活小事]]></category>
		<category><![CDATA[DIY]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">https://max-everyday.com/?p=9928</guid>

					<description><![CDATA[自從科技和網路發達後，古時候的紙本問卷現在也電子化了。現在台灣常見的2個問卷系統是Google表單和SurveyCake。 傳送門： Google表單https://do [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>自從科技和網路發達後，古時候的紙本問卷現在也電子化了。現在台灣常見的2個問卷系統是Google表單和SurveyCake。</p>



<p>傳送門：</p>



<ul class="wp-block-list"><li>Google表單<br><a href="https://docs.google.com/forms/u/0/">https://docs.google.com/forms/u/0/</a></li><li>SurveyCake<br><a href="https://www.surveycake.com/">https://www.surveycake.com/</a></li></ul>



<p>這2套系統真的方便，有問卷需求的人大多情況下使用免費的服務就可以滿足需求。使用公共的服務有優點。</p>



<ul class="wp-block-list"><li>在硬體上：不需要有自己的網頁伺服器和支付網路頻寬使用費用。</li><li>在軟體上：不需要自行開發和維護問卷系統。</li></ul>



<p>上列的優點，在某些特定的情況下也會是缺點。例如：</p>



<ul class="wp-block-list"><li>如果你想統計的資料內容不想公開給第三方的公司（例如：Google 和 SurveyCake）以避免被外流。</li><li>如果你的網站不想另開視窗到第三方的公司，而且或不想使用iframe方式 embed 問卷。</li></ul>



<p>今天要分享如何透過WordPress完成自己設計問卷，其實滿簡單的，在WordPress網站後台點一下「外掛」(Plugins)，安裝一個問卷(survey)的外掛即可，目前查詢出來較熱門的4個問卷外掛如下：</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="665" src="https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-25-at-23.27.52.jpg" alt="" class="wp-image-9930" srcset="https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-25-at-23.27.52.jpg?v=1577290983 1024w, https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-25-at-23.27.52-500x325.jpg?v=1577290983 500w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>Max 比較了一下 Formidable Form (Lite) 和 WPForms (Lite)。</p>



<p>傳送門：</p>



<ul class="wp-block-list"><li>Formidable Form (Lite)<br><a href="https://formidableforms.com/">https://formidableforms.com/</a></li><li>WPForms (Lite)<br><a href="https://wpforms.com/">https://wpforms.com/</a></li></ul>



<p>附註：Lite ＝ 只提供基本功能的免費版</p>



<h4 class="wp-block-heading">明細匯出功能比較：</h4>



<ul class="wp-block-list"><li>QSM 要付費的版本才有「匯出」(Export Result) 功能。</li><li>WPForms (Lite) 免費版，也沒有匯出功能，使用者填完的問卷可以透過SMTP方式寄給管理者。</li><li>Formidable Form (Lite)，<strong>有提供</strong>匯出功能。</li></ul>



<p>沒有匯出的功能，真的有點麻煩，沒辦法做統計、過濾和分析。Max推薦使用線上的 Google 試算表 (Excel)：<br><a href="https://docs.google.com/spreadsheets/u/0/?usp=sheets_web">https://docs.google.com/spreadsheets/u/0/?usp=sheets_web</a></p>



<h4 class="wp-block-heading">操作介面比較：</h4>



<ul class="wp-block-list"><li>WPForms 和 Formidable 在很多的設計、概念或細節都長的一樣，大多都設計的滿易懂的。</li><li>WPForms 在欄位的拖曳移動比Formidable流暢，操作上可以少點擊一個「移動」的圖示。</li><li>WPForms 的「輸入內容防呆」、「提示訊息的客製化」也就是方便中文化做的比較好。</li></ul>



<h4 class="wp-block-heading">Max使用心得：</h4>



<p>1：Formidable 在設計問卷時要常點右上角的Update, WPForms 要點 Save。</p>



<p>2：Formidable 和 WPForms 在欄位內容值為「數字」時請使用 Number 欄位形態，會比預設的 Text（單行文字）好一點。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="583" src="https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-26-at-00.57.27.jpg" alt="" class="wp-image-9931" srcset="https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-26-at-00.57.27.jpg?v=1577293196 1024w, https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-26-at-00.57.27-500x285.jpg?v=1577293196 500w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>3：Formidable 和 WPForms 在下拉框(Dropdown)或單選(Radio Buttons) 裡有批次大量輸入選項(Bulk Edit Options)的功能很方便。</p>



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="733" src="https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-26-at-00.54.06.jpg" alt="" class="wp-image-9932" srcset="https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-26-at-00.54.06.jpg?v=1577293496 1024w, https://max-everyday.com/wp-content/uploads/2019/12/Screen-Shot-2019-12-26-at-00.54.06-500x358.jpg?v=1577293496 500w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>4：Formidable 和 WPForms 都沒有提供Radio Buttons 遇到多選為「其他」並允許使用者輸入其他值的這種選項。替代解法是再多加一行 Text 格式的欄位。 </p>



<p>WPForms 有很貼心地提供 Condition 的功能，可以自動先隱藏該其他的輸入框，遇到 Radio 或 Dropdown Options 值為某個情況時，才顯示該欄位。</p>



<p>像這個的 javascript 或 jQuery 寫起來其實2~3 行就解決了，如果是使用 Formidable 在網站裡多加一段 javascript 應該不難，只是有一點點花時間。</p>



<h4 class="wp-block-heading">結論：</h4>



<p>WPForms 的美編和功能相對都較好，如果是不想付費又想有匯出功能應該就是選擇 Formidable 或者是使用其他非官方授權的外掛。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://max-everyday.com/2019/12/survey-diy/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Google Cloud Platform雲端主機，WordPress安裝與域名設定</title>
		<link>https://max-everyday.com/2017/08/google-cloud-platform-wordpress/</link>
					<comments>https://max-everyday.com/2017/08/google-cloud-platform-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Max]]></dc:creator>
		<pubDate>Wed, 30 Aug 2017 00:45:46 +0000</pubDate>
				<category><![CDATA[生活小事]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">http://max-everyday.com/?p=4446</guid>

					<description><![CDATA[下面教學真的滿Easy的，一下子就把環境弄好了，Google 的 scalability 一定比 DigitalOcean好，從DigitalOcean切換到應該可以省下 [&#8230;]]]></description>
										<content:encoded><![CDATA[<p>下面教學真的滿Easy的，一下子就把環境弄好了，Google 的 scalability 一定比 DigitalOcean好，從DigitalOcean切換到應該可以省下 60美金（約台幣1800)＝5美金 x 12月，滿可觀的，可是想到要搬家有點懶，過1年的優惠之後，以Google最低的費率來看，DigitalOcean給的20GB會剩下10GB，所以切換到 Google 只有第1年賺到，第2年要便宜就只能再搬出來。</p>
<p>linode 給的也比 DigitalOcean 優惠，有點想從DigitalOcean新加坡Server搬來去linode日本Server。<br />
<a href="https://www.linode.com/pricing">https://www.linode.com/pricing</a></p>
<p>DigitalOcean:<br />
<a href="https://www.digitalocean.com/pricing/#memory">https://www.digitalocean.com/pricing/#memory</a></p>
<p>&nbsp;</p>
<hr />
<p>Google Cloud Platform雲端主機！免費挺你一整年，WordPress安裝與域名設定<br />
<a href="https://www.minwt.com/website/server/17368.html">https://www.minwt.com/website/server/17368.html</a></p>
<p><a href="http://max-everyday.com/wp-content/uploads/2017/08/Screenshot-2017-08-30-08.22.52.jpg" data-lightbox="gal[4446]"><img loading="lazy" decoding="async" class="alignnone wp-image-4447 size-medium" src="http://max-everyday.com/wp-content/uploads/2017/08/Screenshot-2017-08-30-08.22.52-500x320.jpg" alt="" width="500" height="320" srcset="https://max-everyday.com/wp-content/uploads/2017/08/Screenshot-2017-08-30-08.22.52-500x320.jpg 500w, https://max-everyday.com/wp-content/uploads/2017/08/Screenshot-2017-08-30-08.22.52.jpg 800w" sizes="(max-width: 500px) 100vw, 500px" /></a></p>
]]></content:encoded>
					
					<wfw:commentRss>https://max-everyday.com/2017/08/google-cloud-platform-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>幫我姐弄一個購物網站</title>
		<link>https://max-everyday.com/2017/04/wordpress-store/</link>
					<comments>https://max-everyday.com/2017/04/wordpress-store/#respond</comments>
		
		<dc:creator><![CDATA[Max]]></dc:creator>
		<pubDate>Mon, 03 Apr 2017 18:48:11 +0000</pubDate>
				<category><![CDATA[生活小事]]></category>
		<category><![CDATA[DIY]]></category>
		<category><![CDATA[wordpress]]></category>
		<guid isPermaLink="false">http://max-everyday.com/?p=3262</guid>

					<description><![CDATA[我姐傳訊息問我，他在網路上賣東西，他想要一個「賣家系統」，問我他應該買 Fbuy或Buy+1 ？&#160;目前都沒看到可以支援。在line下單的，都只有看到支援fb的。 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>我姐傳訊息問我，他在網路上賣東西，他想要一個「賣家系統」，問我他應該買 Fbuy或Buy+1 ？&nbsp;目前都沒看到可以支援。在line下單的，都只有看到支援fb的。</p>



<p>姐姐的需求是：</p>



<ul class="wp-block-list"><li>不用合併金流。待消費者匯款完成，消費者填寫明細（匯款金額/匯款日期）回報系統即可。</li><li>管理者操作介面，要可以上架商品。我上架的商品可以連結。</li><li>消費者操作介面，下單通知/匯款通知/出貨通知。</li><li>註冊會員，只能看到自己的資料。系統會帶出已下單的商品，訂單欄位：數量/單價/小計跟運費、總計，已出貨的可以顯示出貨日期和物流單號。</li><li>檢視訂單時，最下方還會直接帶出賣家所提供的銀行帳號，方便消費者去匯款。消費者匯款完成後登入填寫匯款通知賣家。</li></ul>



<p>我仔細研究&nbsp;Fbuy或Buy+1 提供的功能之後，覺得，試試看用Wordpress 架一個看看。於是研究了一下這幾個 demo 站網，並找出這些佈景共同的地方：</p>



<ul class="wp-block-list"><li><a href="http://demo.sparklewpthemes.com/metrostore/product/apple-macbook-pro-13-inch-laptop/">http://demo.sparklewpthemes.com/metrostore/product/apple-macbook-pro-13-inch-laptop/</a></li><li><a href="http://demo.sparklewpthemes.com/sparklestore/shop/">http://demo.sparklewpthemes.com/sparklestore/shop/</a></li><li><a href="http://demo.themes4wp.com/alpha-store/">http://demo.themes4wp.com/alpha-store/</a></li><li><a href="http://demo.themes4wp.com/simple-store/">http://demo.themes4wp.com/simple-store/</a></li><li><a href="http://wenthemes.com/theme-demos/?demo=clean-commerce">http://wenthemes.com/theme-demos/?demo=clean-commerce</a></li><li><a href="https://demo.themegrill.com/estore/">https://demo.themegrill.com/estore/</a></li><li><a href="http://demo.themes4wp.com/maxstore/">http://demo.themes4wp.com/maxstore/</a></li><li><a href="http://demo.themes4wp.com/e-shop/">http://demo.themes4wp.com/e-shop/</a></li><li><a href="http://demo.themes4wp.com/giga-store/">http://demo.themes4wp.com/giga-store/</a></li><li><a href="http://demo.themes4wp.com/gama-store/">http://demo.themes4wp.com/gama-store/</a></li></ul>



<figure class="wp-block-image is-style-default"><a href="http://max-everyday.com/wp-content/uploads/2017/04/Screenshot-2017-04-01-07.55.28.jpg" data-lightbox="gal[3262]"><img loading="lazy" decoding="async" width="2248" height="1432" src="http://max-everyday.com/wp-content/uploads/2017/04/Screenshot-2017-04-01-07.55.28.jpg" alt="" class="wp-image-3264"/></a></figure>



<p>我想，找到這些共同的地方，即使是套用其他漂亮的佈景，把共用的地方加上去應該也就給變成購物網站了。</p>



<p>共同的地方，購物網站，消費者會想隨時看看自己的訂單，還有購物車。網站會有明顯的聯絡方式。</p>



<p>試了幾個 wordpress 關於 member 或 user 的 &nbsp;plugin, &nbsp;不太滿意，還是改用 facebook 的帳號當member 好了。所以照下面這篇：<br><a href="http://www.krizna.com/demo/login-with-facebook-using-php/">http://www.krizna.com/demo/login-with-facebook-using-php/</a></p>



<p>先到<br><a href="https://developers.facebook.com/apps/">https://developers.facebook.com/apps/</a></p>



<p>建了一個 app。</p>



<p>接著，是要讓 wordpress 的 &nbsp;php &nbsp;支援 facebook. 所以下載 facebook php sdk source code, 讓 &nbsp;php code 去 include:</p>



<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
https://github.com/facebook/php-graph-sdk
</div></figure>



<p>前置工作都OK 後就開始把 facebook 的 sample code 拿來用：<br><a href="https://developers.facebook.com/docs/php/howto/example_facebook_login">https://developers.facebook.com/docs/php/howto/example_facebook_login</a></p>



<hr class="wp-block-separator"/>



<p>已經登入就變成&#8221;登出&#8221;：</p>



<p>Remove Facebook Log-in Button after a successful log in<br><a href="http://stackoverflow.com/questions/31349616/remove-facebook-log-in-button-after-a-successful-log-in">http://stackoverflow.com/questions/31349616/remove-facebook-log-in-button-after-a-successful-log-in</a></p>



<hr class="wp-block-separator"/>



<p>增加購物車 「Woocommerce 購物車」：</p>



<ul class="wp-block-list"><li>為公司省下數萬元：教你如何 DIY 安裝免費購物車平台 WooCommerce<br><a href="https://www.hkitblog.com/?p=29630">https://www.hkitblog.com/?p=29630</a></li><li>WordPress教學－WordPress購物車套件WooCommerce安裝與設定<br><a href="https://www.minwt.com/website/wordpress/14802.html">https://www.minwt.com/website/wordpress/14802.html</a></li></ul>



<p>Woocommerce 運費修改範例：</p>



<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
http://www.tutorialsgo.com/create-a-custom-shipping-method-for-woocommerce/
</div></figure>



<p>這4組商品顯示方式，我之前做購物網站時有實作過，真的不太容易：<br><a href="http://max-everyday.com/wp-content/uploads/2017/04/Screenshot-2017-04-01-14.39.02.jpg" data-lightbox="gal[3262]"></a></p>



<p>多組的規格商品，要透過 「變化類型」來產生，變化的來源是從「屬性」來進行變化。但這似乎有Bug, 在完全沒有管理庫存，在管理介面會顯示「有庫存」，但在前台，消費者會顯示「抱歉，此商品已下架，請選擇不同的組合」，發生的原因是每一筆「變化類型」 的價格，要重新一筆一筆再輸入一次，因為每一筆的變化都會被視為一個獨立的商品，獨立的貨號。</p>



<p>一個規格，等同一個商品，會有自己的「單價」、「特價」和「庫存」。</p>



<hr class="wp-block-separator"/>



<p>有些非&nbsp;woocommerce 官方的 theme, 多國語言的字會跑掉，要重新指回去 &#8216;woocommerce&#8217;, 例如：</p>



<ul class="wp-block-list"><li>&lt;?php esc_html_e(&#8216;Subtotal&#8217;, &#8216;woocommerce&#8217;); ?&gt;</li><li>&lt;?php esc_html_e(&#8216;Total&#8217;, &#8216;woocommerce&#8217;); ?&gt;</li><li>&lt;?php esc_html_e(&#8216;Billing Details&#8217;, &#8216;woocommerce&#8217;); ?&gt;</li><li>&lt;?php esc_html_e( &#8216;Your order&#8217;, &#8216;woocommerce&#8217; ); ?&gt;</li><li>&lt;?php esc_html_e(&#8216;Login/ Register&#8217;, &#8216;woocommerce&#8217;); ?&gt;</li><li>&lt;?php esc_html_e(&#8216;My Account&#8217;, &#8216;woocommerce&#8217;); ?&gt;</li><li>esc_html__( &#8216;Sale!&#8217;, &#8216;woocommerce&#8217; )</li></ul>



<hr class="wp-block-separator"/>



<p>由於每個商品都在特價，所以要拿掉 sales-tag, 不然每個商品會多被覆蓋一個「特價」的tag icon，不好看。這個還滿容易修改的，整個區塊用 html &lt;!&#8211; &nbsp; &#8211;&gt; 註解掉就OK了。</p>



<p>$product-&gt;is_on_sale() 的判斷，在列表頁和商品內容頁都有，需要修改2次，內容頁可能需要修改到 plugin, 檔案在這裡：</p>



<p>woocommerce/templates/single-product/sale-flash.php</p>



<hr class="wp-block-separator"/>



<p>由於 WooCommerce 是準備寫給很多行業用的，所以要來拿掉一些用不到的功能，例如：Download, 拿掉前台的 Download, 修改檔案：&nbsp;woocommerce/includes/wc-account-functions.php</p>



<pre class="wp-block-preformatted">function wc_get_account_menu_items() {
 $endpoints = array(
 'orders' =&gt; get_option( 'woocommerce_myaccount_orders_endpoint', 'orders' ),
 'downloads' =&gt; get_option( 'woocommerce_myaccount_downloads_endpoint', 'downloads' ),
 'edit-address' =&gt; get_option( 'woocommerce_myaccount_edit_address_endpoint', 'edit-address' ),
 'payment-methods' =&gt; get_option( 'woocommerce_myaccount_payment_methods_endpoint', 'payment-methods' ),
 'edit-account' =&gt; get_option( 'woocommerce_myaccount_edit_account_endpoint', 'edit-account' ),
 'customer-logout' =&gt; get_option( 'woocommerce_logout_endpoint', 'customer-logout' ),
 );

 $items = array(
 'dashboard' =&gt; __( 'Dashboard', 'woocommerce' ),
 'orders' =&gt; __( 'Orders', 'woocommerce' ),
 'downloads' =&gt; __( 'Downloads', 'woocommerce' ),
 'edit-address' =&gt; __( 'Addresses', 'woocommerce' ),
 'payment-methods' =&gt; __( 'Payment Methods', 'woocommerce' ),
 'edit-account' =&gt; __( 'Account Details', 'woocommerce' ),
 'customer-logout' =&gt; __( 'Logout', 'woocommerce' ),
 );</pre>



<p>把 download 拿掉就可以了。</p>



<p>這個部份，我覺得應該有其他更好的作法，應該有參數可以設定，但我懶的去找。</p>



<p>修改 plugin source 的問題在，下一次版本更新 source code 會被改回來，所以修改參數是較佳的解法。</p>



<p>&#8220;Go shop&#8221; 官方有中文化，手動修改 templates/myaccount/orders.php 裡的值為 &#8220;開始購物&#8221;，但不知道為什麼沒套用到。</p>



<p>&#8220;Continue shopping&#8221; 官方有中文化，手動修改 includes/wc-cart-functions.php 裡的值為 &#8220;繼續購物&#8221;，但不知道為什麼沒套用到。</p>



<p>修改 source code 真的很笨，而且很沒效率，所以我安裝了 LOCO plugin, 這個 plugin 需要在 server side install php extension:</p>



<pre class="wp-block-code"><code>sudo apt-get install php7.0-mbstring
</code></pre>



<pre class="wp-block-code"><code>sudo apt-get install php7.0-dom</code></pre>



<hr class="wp-block-separator"/>



<p>動態訂價的部份，我使用了這一個套件：</p>



<p>Dynamic Pricing And Discounts For Woocommerce</p>



<p>把所有商品都變成&#8221;免運&#8221;之後，就可以把運費欄位拿掉。</p>



<p>How to remove Shipping from Woocommerce cart?<br><a href="http://stackoverflow.com/questions/37304801/how-to-remove-shipping-from-woocommerce-cart">http://stackoverflow.com/questions/37304801/how-to-remove-shipping-from-woocommerce-cart</a></p>



<p>Add the following snippet on your <code>functions.php</code></p>



<p><code>function disable_shipping_calc_on_cart( $show_shipping ) { if( is_cart() ) { return false; } return $show_shipping; } add_filter( 'woocommerce_cart_ready_to_calc_shipping', 'disable_shipping_calc_on_cart', 99 );</code></p>



<p>上面這一段是要 overwrite 原本官方寫的這一段：</p>



<pre class="wp-block-preformatted">&nbsp;&nbsp;&nbsp; /**
&nbsp;&nbsp; &nbsp; * Sees if the customer has entered enough data to calc the shipping yet.
&nbsp;&nbsp; &nbsp; *
&nbsp;&nbsp; &nbsp; * @return bool
&nbsp;&nbsp; &nbsp; */
&nbsp;&nbsp; &nbsp;public function show_shipping() {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if ( ! wc_shipping_enabled() || ! is_array( $this-&gt;cart_contents ) )
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return false;

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if ( 'yes' === get_option( 'woocommerce_shipping_cost_requires_address' ) ) {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if ( ! WC()-&gt;customer-&gt;has_calculated_shipping() ) {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if ( ! WC()-&gt;customer-&gt;get_shipping_country() || ( ! WC()-&gt;customer-&gt;get_shipping_state() &amp;&amp; ! WC()-&gt;customer-&gt;get_shipping_postcode() ) ) {
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return false;
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}
&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}

&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return apply_filters( 'woocommerce_cart_ready_to_calc_shipping', true );
&nbsp;&nbsp; &nbsp;}

</pre>



<hr class="wp-block-separator"/>



<p>拿掉&nbsp; UI 裡的 woocommer 字樣</p>



<p>storefront/inc/storefront-template-functions.php</p>



<hr class="wp-block-separator"/>



<p>遇到有一個色塊的背景色很怪，查了也挑戰修改，弄了快1小時，為了要改 order_details 改不動，真的很怪！原作者也寫的很奇怪，改了 woocommerce 和 storefront 裡的 code, 但是他在產生成 html 時，還是舊的值！算了，就改用其他方式來完成，把 order_details 改用 bacs_details.</p>



<hr class="wp-block-separator"/>



<p>金流付款內容的取得，這段code 只出現一次，但是想修改到每次查詢訂單內容時，都可以顯示出來。不得不trace 原作者的 code, 才能寫出來。@_@;</p>



<hr class="wp-block-separator"/>



<p>在條列頁就可以加入商品進購物車的設計，很奇怪，所以我註解掉這一段，讓使用者變成點商品圖片進去看商品說明，而不是會被卡在畫面上，要是要加入購物車，還是去看商品的大圖。這個設計真的很奇怪又不直覺。</p>



<pre class="wp-block-preformatted">&lt;div class="products-hover-wrapper"&gt;
 &lt;div class="products-hover-block"&gt;
 &lt;a href="&lt;?php echo estore_woocommerce_placeholder_img_src(); ?&gt;" class="zoom" data-rel="prettyPhoto"&gt;&lt;i class="fa fa-search-plus"&gt; &lt;/i&gt;&lt;/a&gt;
 &lt;?php woocommerce_template_loop_add_to_cart( $product-&gt;post, $product ); ?&gt;
 &lt;/div&gt;
 &lt;/div&gt;

</pre>



<hr class="wp-block-separator"/>



<p>設定 WooCommerce 的「滿額免運」功能：<br><a href="https://www.minwt.com/website/wordpress/16002.html">https://www.minwt.com/website/wordpress/16002.html</a></p>



<hr class="wp-block-separator"/>



<p>WooCommerce 還有一個奇怪的問題，在顯示 Login/Register 還有 Account Detail 是放在同一個畫面裡，解法：<br><a href="http://wordpress.stackexchange.com/questions/193435/woocommerce-registration-page">http://wordpress.stackexchange.com/questions/193435/woocommerce-registration-page</a></p>



<p>Using the <code>[woocommerce_my_account]</code> shortcode, a user will see their account details if they&#8217;re logged in and if they&#8217;re not logged in, they&#8217;ll see a login and registration form.</p>



<p>Using the same page title &#8220;My Account&#8221; for these different users isn&#8217;t ideal because a user that has never created an account won&#8217;t naturally navigate to a &#8220;My Account&#8221; page in order to create an account.</p>



<p>A possible solution is to add the page that includes that shortcode twice to your navigation menu, name them &#8220;Login&#8221; and &#8220;My Account&#8221;, and give them separate classes:</p>



<figure class="wp-block-image is-style-default"><img decoding="async" src="https://i.stack.imgur.com/dA7du.png" alt="Login Nav Links"/></figure>



<p>Then we can control the visibility of the navigation links based on if a user is logged in:</p>



<pre class="wp-block-code"><code>add_action('wp_head','jg_user_nav_visibility');
function jg_user_nav_visibility() {

    if ( is_user_logged_in() ) {
        $output="&lt;style> .nav-login { display: none; } &lt;/style>";
    } else {
        $output="&lt;style> .nav-account { display: none; } &lt;/style>";
    }

    echo $output;
}</code></pre>



<p>上面這一個問題，一下子就解決了，另一個問題是在顯示 Login/Register 是放在同一個畫面裡，解法，login&nbsp; url 增加 ?mode=login, 然後貼上下面這段 javascript 在 「我的帳號」：</p>



<pre class="wp-block-preformatted">[woocommerce_my_account]

&lt;script type="text/javascript"&gt;
function getParameterByName(name, url) {
 if (!url) {
 url = window.location.href;
 }
 name = name.replace(/[\[\]]/g, "\\</pre>



<pre class="wp-block-preformatted">amp;"); var regex = new RegExp("[?&amp;]" + name + "(=([^&amp;#]*)|&amp;|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } jQuery(function($) { if(getParameterByName('mode')=='login') { $(".col-1" ).show(); $(".col-2" ).hide(); } else { $(".col-2" ).show(); $(".col-1" ).hide(); } }); &lt;/script&gt;</pre>



<hr class="wp-block-separator"/>



<p>由於整個站的 search 都不需要 search blog 或其他內容，只需要 search product, 所以要調整 UI 裡關於 search 的 code, 參考 plugins 裡 woocommerce/templates/product-searchform.php 的寫法，還有用到的多國語用的的 key. 只要查 product, 在 search form 增加：&lt;input type=&#8221;hidden&#8221; name=&#8221;post_type&#8221; value=&#8221;product&#8221; /&gt;</p>



<pre class="wp-block-preformatted">&lt;form role="search" method="get" class="woocommerce-product-search" action="&lt;?php echo esc_url( home_url( '/' ) ); ?&gt;"&gt;
 &lt;label class="screen-reader-text" for="woocommerce-product-search-field"&gt;&lt;?php _e( 'Search for:', 'woocommerce' ); ?&gt;&lt;/label&gt;
 &lt;input type="search" id="woocommerce-product-search-field" class="search-field" placeholder="&lt;?php echo esc_attr_x( 'Search Products&amp;hellip;', 'placeholder', 'woocommerce' ); ?&gt;" value="&lt;?php echo get_search_query(); ?&gt;" name="s" title="&lt;?php echo esc_attr_x( 'Search for:', 'label', 'woocommerce' ); ?&gt;" /&gt;
 &lt;input type="submit" value="&lt;?php echo esc_attr_x( 'Search', 'submit button', 'woocommerce' ); ?&gt;" /&gt;
 &lt;input type="hidden" name="post_type" value="product" /&gt;
&lt;/form&gt;</pre>



<hr class="wp-block-separator"/>



<p>內建的 user 會員系統不太好用，如果自動產生密碼，user 下次要登入時會不知道密碼，很麻煩。如果讓user 在註冊時自己打密碼，更麻煩，因為密碼太簡單還不能註冊，最佳解法是加裝 wp-facebook-login 外掛。</p>



<p>滿簡單的，先到facebook develop 申請一組 app 就可以開始使用。這plugin 有一個問題就是，&#8221;Connect with Facebook&#8221; 是英文字。目前這個外掛的 language 只有：</p>



<p>languages/fbl-bg_BG.mo<br>languages/fbl-bg_BG.po<br>languages/fbl-cs_CZ.po<br>languages/fbl-en_US.po<br>languages/fbl-es_ES.mo<br>languages/fbl-es_ES.po<br>languages/fbl-it_IT.mo<br>languages/fbl-it_IT.po<br>languages/fbl-ka_GE.mo<br>languages/fbl-ka_GE.po<br>languages/fbl-vi_VI.po</p>



<p>去修改 po 檔，透過 msgfmt 或 gettext 來轉換 po 到 mo 太麻煩，直接修改掉：</p>



<p>public/class-facebook-login-public.php</p>



<hr class="wp-block-separator"/>



<p>在 wordpress 世界裡，加欄位在 post 裡神奇的方便！ 幾乎所有的外掛都可以不增加 database tablel fields 就可以達成自己想完成的任務，這超酷的。加欄位範例</p>



<p>get_post_meta($post_id, &#8216;file_name&#8217;, true);</p>



<p>相關網頁：</p>



<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
http://blog.wpjam.com/function_reference/get_post_meta/
</div></figure>



<p>相關函數：</p>



<ul class="wp-block-list"><li>add_post_meta()</li><li>delete_post_meta()</li><li>delete_post_meta_by_key()</li><li>get_post_custom()</li><li>get_post_custom_keys()</li><li>get_post_custom_values()</li><li>get_post_meta()</li><li><a href="http://blog.wpjam.com/function_reference/update_post_meta/">update_post_meta()</a></li></ul>



<hr class="wp-block-separator"/>



<p>訂單的狀態：</p>



<ol class="wp-block-list"><li>pending 未付款</li><li>processing 處理中</li><li>on-hold 等候處理</li><li>completed 完成</li><li>cancelled 取消</li><li>refunded 已退款</li><li>failed 失敗</li></ol>



<p>WooCommerce 預設是ATM 買完東西，訂單的狀態會設在on-hold 等候處理，如果切換到pending 未付款，過幾個小時訂單就會失效，切換到cancelled 取消，這是一個保護機制，我之前寫的購物網站也遇到，因為客人的訂單會吃掉庫存，有單代表要出貨，不自動取消訂單，其他客人會沒辦法買東西。</p>



<p>發現他寫的太完整，有點難修改，我只修改了他內建的一個規則，允許客人在 on-hold （付完款），可以取消訂單，理論上使用第3方支付或線上刷卡的訂單，支付完成也是設定在on-hold （付完款），付完款的單要走到退貨流程，最後再變成refunded 已退款。</p>



<p>這個 pending 未付款 的狀態是給，刷卡的人支付時授權失敗，但要保留住他的訂單，讓他可以選擇其他支付方式。</p>



<hr class="wp-block-separator"/>



<p>關掉 zoom in 功能，預設 storefront 系列是開啟的，需要手動修改 storefront/inc/class-storefront.php</p>



<p>去註解掉</p>



<p>add_theme_support( &#8216;wc-product-gallery-zoom&#8217; );<br>add_theme_support( &#8216;wc-product-gallery-lightbox&#8217; );<br>add_theme_support( &#8216;wc-product-gallery-slider&#8217; );</p>



<hr class="wp-block-separator"/>



<p>寄 Email 的部份，自己架設的 smtp 寄信伺服器會有寄出的信很容易被判定為「廣告信」或「垃圾信」，可以切換到 Gmail&nbsp; 或&nbsp; Yahoo，例如：<br>How To Use Gmail or Yahoo with PHP mail() Function<br><a href="https://www.digitalocean.com/community/tutorials/how-to-use-gmail-or-yahoo-with-php-mail-function">https://www.digitalocean.com/community/tutorials/how-to-use-gmail-or-yahoo-with-php-mail-function</a></p>



<p>似乎要先安裝 sendmail, 不然會出現錯誤：</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>sh: 1: /usr/sbin/sendmail: not found</p></blockquote>



<p>sudo apt-get update<br>sudo apt-get install sendmail</p>



<p>php7 重開服務的方法和 php5 不同，不是透過 service php7-fpm restart 而是：</p>



<p><em>prepend <code>sudo</code> if not root</em></p>



<ul class="wp-block-list"><li>Using SysV Init scripts directly: <code>/etc/init.d/php-fpm restart # typical /etc/init.d/php5-fpm restart # debian-style /etc/init.d/php7.0-fpm restart # debian-style PHP 7</code></li><li>Using service wrapper script <code>service php-fpm restart # typical service php5-fpm restart # debian-style service php7.0-fpm restart # debian-style PHP 7</code></li><li>Using Upstart (e.g. ubuntu): <code>restart php7.0-fpm # typical (ubuntu is debian-based) PHP 7 restart php5-fpm # typical (ubuntu is debian-based) restart php-fpm # uncommon</code></li><li>Using systemd (newer servers): <code>systemctl restart php-fpm.service # typical systemctl restart php5-fpm.service # uncommon systemctl restart php7.0-fpm.service # uncommon PHP 7</code></li></ul>



<hr class="wp-block-separator"/>



<p>php 寄信的其他方法：</p>



<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
http://stackoverflow.com/questions/712392/send-email-using-the-gmail-smtp-server-from-a-php-page
</div></figure>



<p>需要先執行：</p>



<p>apt install php-pear</p>



<p>pear install Mail-1.4.0</p>



<p>pear install Net_SMTP</p>



<hr class="wp-block-separator"/>



<pre class="wp-block-code"><code>// Pear Mail Library
require_once "Mail.php";

$from = '&lt;fromaddress@gmail.com>';
$to = '&lt;toaddress@yahoo.com>';
$subject = 'Hi!';
$body = "Hi,\n\nHow are you?";

$headers = array(
    'From' => $from,
    'To' => $to,
    'Subject' => $subject
);

$smtp = Mail::factory('smtp', array(
        'host' => 'ssl://smtp.gmail.com',
        'port' => '465', // or 587
        'auth' => true,
        'username' => 'johndoe@gmail.com',
        'password' => 'passwordxxx'
    ));

$mail = $smtp->send($to, $headers, $body);

if (PEAR::isError($mail)) {
    echo('&lt;p>' . $mail->getMessage() . '&lt;/p>');
} else {
    echo('&lt;p>Message successfully sent!&lt;/p>');
}

</code></pre>



<hr class="wp-block-separator"/>



<p>使用內建的 mail , 並顯示寄信人。這個方法的缺點是在php 不支援multi-thread, 會讓 UI 卡住，在這個 php 的架構下，要讓send mail non-blocking 似乎有點點。</p>



<p>You can accomplish this by using basic headers.</p>



<pre class="wp-block-code"><code>&lt;?php
$to      = 'nobody@example.com';
$subject = 'the subject';
$message = 'hello';
$headers = 'From: Jack Sparrow &lt;jsparrow@blackpearl.com>' . PHP_EOL .
    'Reply-To: Jack Sparrow &lt;jsparrow@blackpearl.com>' . PHP_EOL .
    'X-Mailer: PHP/' . phpversion();

mail($to, $subject, $message, $headers);
?>
</code></pre>



<hr class="wp-block-separator"/>



<p>相關文章：<br>WP Mail SMTP 郵件寄送外掛<br><a href="http://www.wphelper.com.tw/plugins-wp-mail-smtp/">http://www.wphelper.com.tw/plugins-wp-mail-smtp/</a></p>



<p>外掛網址：<a href="https://wordpress.org/plugins/wp-mail-smtp">https://wordpress.org/plugins/wp-mail-smtp</a></p>



<hr class="wp-block-separator"/>



<p>接下來是要到 Google網站管理員 註冊站台：<br><a href="https://search.google.com/search-console?hl=zh-TW">https://search.google.com/search-console?hl=zh-TW</a></p>



<p>Google Search Console是Google開發的一個面向網站管理員的免費工具。網站管理員可以通過該工具了解自己網站的收錄情況並優化其網站的曝光率。</p>



<p>然後增加一組 TXT 的值在 dns 伺服器裡，用來通過網站所有權的驗證。</p>



<hr class="wp-block-separator"/>



<p>接下來是 金流／物流的串接，這個免費 woocommerce 購物車外掛真神奇，台灣居然有滿多廠商已經有提供「付費」串接的服務，像是：</p>



<ul class="wp-block-list"><li>綠界科技 ECPay<br><a href="https://www.ecpay.com.tw/IntroTransport/Service_Fee">https://www.ecpay.com.tw/IntroTransport/Service_Fee</a><br>簡介：歐付寶(All Pay)第三方支付 輕鬆串接Magento！<br><a href="http://www.astralweb.com.tw/magento-payment-all-pay-apply/">http://www.astralweb.com.tw/magento-payment-all-pay-apply/</a></li><li>速買配<br><a href="http://www.smilepay.net/es/index.asp">http://www.smilepay.net/es/index.asp</a></li><li>ezShip便利配<br><a href="https://cloudwp.pro/blog/ezship-for-woocommerce-%E8%B6%85%E5%95%86%E7%89%A9%E6%B5%81%E6%9C%8D%E5%8B%99/">https://cloudwp.pro/blog/ezship-for-woocommerce-%E8%B6%85%E5%95%86%E7%89%A9%E6%B5%81%E6%9C%8D%E5%8B%99/</a></li></ul>



<p>綠界的線上刷卡要收金額的 2.8% 手續費，幫忙產生動態的ATM匯款帳號要收 1%手續費。一筆超商的條碼要 25元。</p>



<p>結論：幫別人省時間，就可以賺到別人的錢。</p>



<hr class="wp-block-separator"/>



<p>除了免費的 https:<br><a href="http://stackoverflow.max-everyday.com/2017/01/lets-encrypt-free-https/">http://stackoverflow.max-everyday.com/2017/01/lets-encrypt-free-https/</a></p>



<p>記得網站還要使用免費的CloudFlare CDN，這樣顯示才會「超級快」。<br>Cloudflare <a href="https://www.cloudflare.com/">https://www.cloudflare.com/</a></p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow"><p>CloudFlare 主要是基於內容傳遞網路（Content Delivery Network, 簡稱 CDN）和分散式網域名稱解析服務（Distributed Domain Name Server）等技術，於世界各地分布超過三十個資料中心，當使用者連接到使用 CloudFlare 服務的網站後，會從最接近使用者的資料中心來接收網站內容，以加快網站載入速度。</p></blockquote>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://max-everyday.com/2017/04/wordpress-store/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
