WP Beginner’s Blueprint

WP Beginner’s Blueprint 
初學者藍圖

Source from: https://www.wpbeginner.com/blueprint/

We are often asked for recommendations on best WordPress plugins and services. People particularly want to know about the plugins and tools that we use to run the WPBeginner website.

As a result, we have decided to create the WPBeginner Blueprint which gives you behind the scenes look at all the tools, plugins, and services that we use here at WPBeginner.

Blog Platform

Self-Hosted WordPress

As you can guess, our website is powered by the best publishing platform on the web, WordPress.org.
我們的網站是由最佳的出版平台：WordPress.org 的提供的。

It’s important that you know the difference between WordPress.com vs WordPress.org and choose the right platform for your needs.
WordPress.com vs WordPress.org 這兩者是不一樣的喔！

While there are many blogging platforms out there, we always recommend using WordPress because of the freedom and flexibility you have to customize your website.
縱使有許多其他的平台可以使用，我們還是建議使用 WordPress，因為他的自由彈性，你可以自訂你的網站！

Recommended reading:

– Comparison of the Top Blogging Platforms 
– Why is WordPress Free?
– 6 reasons why you should use WordPress?

WordPress Web Hosting  你要用一個主機

Web hosting is your website’s house on the internet. Every website needs web hosting, and each website has different needs.

At WPBeginner, we use HostGator. We have been using their service since 2007.

HostGator hosts over 8 million websites and is one of the most popular hosting companies in the industry. With 1-click WordPress install, 99.9% uptime, and 24/7 support, it’s a smart choice for every growing business. (See our HostGator review)

We understand there are thousands of web hosting providers out there. That’s why we have a step by step guide on how to choose the best WordPress hosting for your site.

Website Design / Theme

WPBeginner uses a custom designed WordPress theme built specifically for our website.

Unfortunately this design is not available for download or sale.

We built our custom theme on top of the Genesis framework. See our Genesis Framework review.

If you are looking for high-quality WordPress templates, check out these companies:

• StudioPress
• Themify
• Elegant Themes

Need help choosing a WordPress theme? See our article on 9 things you should consider when selecting a WordPress theme.

Security

VaultPress (Jetpack Backups) – We use VaultPress to create automatic backups. Automatic backups are your first defense against any security threats. Here’s our step by step guide to setup VaultPress automated backups. You may also want to see our comparison of the best WordPress backup plugins.

Sucuri – Sucuri offers web monitoring and malware cleanup service. It helps us enhance our WordPress security and actively block cyber attacks. See how Sucuri helped us block 450,000 WordPress attacks in 3 months

Login Lockdown – We use Login LockDown plugin to prevent brute-force login attacks. It locks user’s IP address after an X number of failed attempts. – See our Login LockDown review.

Performance

W3 Total Cache – We use W3 Total Cache to integrate MaxCDN, do page caching and browser caching to improve site speed. See our W3 Total Cache review.

MaxCDN – We use a Content Delivery Network, MaxCDN, to speed up our site and reduce server load. We use it to serve static content (images, css, javascript). See our MaxCDN review.

Classic Smilies – We use classic smilies to turn off all emoji functionality in WordPress and replace it with older smilies from previous versions of WordPress.

Marketing

Yoast SEO – We use Yoast SEO to improve our on-page SEO by adding Title Tags, XML Sitemaps, Indexation rules and more. See our Yoast SEO review.

OptinMonster – OptinMonster is the best lead generation tool for WordPress. We use it to get more email subscribers. See our OptinMonster review.

WPForms – WPBeginner uses WPForms to power all contact forms and form based lead generations (including email opt-ins and payment orders). See our WPForms review.

MailChimp – MailChimp allows us to design, send, and track beautiful email newsletters to our readers. Every site owner should build an email list. Check out our MailChimp review.

MonsterInsights – MonsterInsights allow us to connect to Google Analytics for FREE. It shows us who visits our website, where they come from, and how they interact with our content.

Frame Buster – We use Frame Buster to stop content pirates from placing their calls-to-action, ads, affiliate links on top of our content. See our Frame Buster for WordPress review.

Monetization

ThirstyAffiliates – We use ThirstyAffiliates to efficiently manage all of our affiliate links. It allows us to cloak links, automatically replace keywords, and more. See our ThirstyAffiliates review.

WP-Bitly – We use WP-Bitly plugin to automatically generate short URLs for our posts that look like http://wpbeg.in/. See our WP-Bitly review.

Styling

Breadcrumb NavXT – We use Breadcrumb NavXT to add breadcrumb navigation showing the visitor’s path to their current location. See our Breadcrumb NavXT review.

Syntax Highlighter – We use Syntax Highlighter Evolved plugin to share code snippets in our posts. It is by far the best solution in our opinion. See our Syntax Highlighter review.

Compact Archives – We use Compact Archives plugin to make our archives page prettier. It helps us compress the output of month/year archive. See our Compact Archives review.

Comments

Akismet – We use Akismet to combat comment SPAM. Akismet lets us focus on writing quality content rather than moderating SPAM comments. See our Akismet review.

Subscribe to Comments Reloaded – We use it to allow our users to subscribe to comments. This way users get notification email when there is a new comment on the post. See our Subscribe to Comments Reloaded review

No Self Pings – We use it to stop WordPress from sending ping back notifications when linking to our own posts. See our No Self Ping review.

Behind the Scenes

There are several tools, plugins, and custom code snippets that we use at WPBeginner. Here is the list of our behind the scene plugins, code snippets, etc.

Edit Flow – We use Edit Flow to manage our editorial workflow. See our Edit Flowreview.

Members – This plugin allows us to add new roles and limit content permissions by users. We use it specifically for role management in WPBeginner. See our expert comparison of 5 best WordPress membership plugins.

Advanced Custom Fields We use Advanced Custom Fields to add custom fields into WordPress posts and custom post types.

Post Types Order – By default, you can order your posts by ID, author, title, date etc. But there is no easy way to use a custom order. This plugin lets us do that with an easy drag-drop interface. See our Post Types Order review.

Simple Page Ordering – This plugin works the same as the one mentioned above, it allows us to set custom ordering but for pages. See our Simple Page Ordering review

Excerpts for Pages – We use custom code snippet to display excerpts for pages in WordPress.

Random Post Redirect – This custom code snippet allows us to redirect users to a random post in WordPress if they add /random/ at the end of the url.

Title and Nofollow for Links – We use it to add a title and nofollow fields to insert link popup in WordPress. See our Title and NoFollow for Links review.

Restore Image Title – We use it to add title attribute to the images we add into WordPress posts. See our Restore Image Title review.

That’s all for now. We will update this page when we start using some new plugin or tool on WPBeginner.

If you found our blueprint helpful, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

繁簡轉換

這應該是很稀鬆平常的問題，由來已久。

wordpress 上有找到一個 WP Chinese conversion 的外掛，剛開始使用都還好，可是再掛上 Cache 以後就有問題了。在首頁上，無法轉換，內頁以後就可以轉換！WP Chinese conversion作者的說明頁裡面也有說，加上 cache以後可能會有問題。

好吧！只好另外找解。

後來找到這個：

[教學]利用JS實現網頁簡繁轉換功能

紀錄一些內容過來：

第1步 首先請您開啟FTP軟體，將您的JS上傳到網站上，如果怕路徑複雜，建議上傳在網站根目錄就好了。

第2步 以WordPress來說，直接在後台的【外觀】→【模組】，進入後新增文字模組後將以下語法貼上去，語法請放置在</body>之前。在貼上之前建議變更以下參數：

cookieDomain：Cookie 網址，請輸入您的網址即可。

※更多參數說明請參考：這篇。

<a id="translateLink" >簡體</a>
<script type="text/javascript" src="http://your-site/tw_cn.js"></script>
<script type="text/javascript">
var defaultEncoding = 1;
var translateDelay = 0;
var cookieDomain = "http://yourname.com";
var msgToTraditionalChinese = "繁體";
var msgToSimplifiedChinese = "简体";
var translateButtonId = "translateLink";
translateInitilization();
</script>

第3步 接著在網站上就會看到簡繁轉換的選項，點一下就會轉換。

第4步 你看，是不是轉換成簡體中文了呢？這時候瀏覽其他頁面依然都是簡體中文，因為剛剛前面設定值的部份我們有設定Cookie位置就會有囉！

自架mail server，email收不到？

自架的 mail server，奇怪的是：發信正常，但收信就都收不到？！

幾經查詢、檢查設定

發現：原來是 email  routing 設定錯誤。
email routing 可以是 remote/local
正常應該是 local，而現在是 remote，改成 local 就可以了！

紀錄一下

wordpress 的角色

管理員：可以做所有的事情。這應該知道了哄！

管理員網站最高的管理權限，擁有管理網站的全部功能，一般來說除了站長本身會擁有這個權限之外，網管人員也會有這個權限。

如果沒有必要的話請盡量不要為下面的作者或員工開啟管理員權限，因為管理員權限可以掌管整個網站的生殺大權，所以在帳號密碼的設定上也要非常地格外小心。

編輯：可以文章新增、刪除、修改

編輯比作者的權限更高，可以針對所有文章、媒體檔案及迴響進行新增、編輯和刪除，甚至文章的分類、標籤以及頁面都可以完全自由編輯，等於擁有整個網站的完整編輯權限。

你可以將編輯和管理員畫上相同權限的等號，如果以傳統媒體的職稱來說的話類似總編輯的角色，唯一的差異在於管體員可以經由後台自由的安裝或編修網站版型跟外掛，而編輯權限只是擁有編輯文章的最大權限而已。

作者：可以文章新增、修改、刪除

作者權限具備發佈文章的所有權限，除了可以自由上傳媒體檔案、編修與刪除文章(僅限自己轉寫的文章)，還可以直接發表文章。

作者的後台執行權限算是很完整的，所以在授權上要稍微注意一下，如果對方只是工讀生，在編寫文件上還需要重複校搞的話，建議開啟寫手權限即可，避免不小心發佈了有爭議的文字。

Bootstrap 3 跳出式視窗 modal 如何做？

參考：

https://getbootstrap.com/docs/3.3/javascript/#modals

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

然後，如何讓這個 modal 在載入網頁時，自動彈出？

 <script type="text/javascript">
    $(document).ready(function(){
        $('#myModal').modal('show');
    });
  </script>

透過這段 javascript 讓網頁一開啟時，就自動 show出來。

CodeChargeStudio 不同的 Design 如何轉換

如果同一個 project，可是會需要用到兩個以上不同的Design，這時怎麼辦？

CCS 提供了兩個方法：

一、透過 querystring 設定 ?design=xxx

二、透過 session variable $_SESSION["design"] = "xxx";

只要在每個 page 的 before_show event 中，多寫下：

$_SESSION["design"] = "xxx";

這樣就可以了！

php iif

The function iif does not exist in the standard PHP libraries.

But in most cases it is a 'short if expression' such as: (condition ? true : false).