Astra theme【網站搬家】與【網頁速度調整】心得

自架個人部落格已經 3 年多了，當然也看了許多社團中的討論文章，對於重新安裝網站也有點概念。所以利用這次網站換主機的機會，順便把佈景主題更換成 Astra theme。只是在社團裡，大家討論的結論大多是利用備份外掛 (UpdraftPlus、Duplicator、… ) 來完成網站重新安裝。對於這種做法，在多數的狀況下，是可行也是最有效率的方式。

但是，萬一沒有定期備份網站資料、自己搞砸網站設定然後也沒能力還原、中毒或惡意程式存在已久導致備份檔案也不乾淨…，難道用備份外掛還原網站還有用嗎?本身的例子就是【自己搞砸網站設定然後也沒能力還原】，雖然嘗試過重新安裝外掛與佈景主題、使用 WP Reset 還原設定…等，網站還是怪怪的。

不僅反應速度慢，連原本定期會執行的 UpdraftPlus 備份、Wordfence 自動更新…等，都失效了，只能手動執行。在社團中求救，有些站長會熱心提供方向；當然也遇到少數專業人士的酸言酸語。總之，就是找不到方法解決自己遇到的問題。

該放棄經營部落格嗎? 當然不是! 以下就分享【網站搬家的過程】、【更換佈景主題的動機】、與【網頁速度微調】的心路歷程。現在，對於 Astra Pro 佈景主題感到非常滿意，我需要的功能，Astra Pro 都可以滿足我!

WordPress網站搬家換主機

WordPress免費架站的問題有那些呢?

加入 WordPress 或 NAS 相關社團的這幾年當中，發現在臺灣自架部落格網站的人似乎不多，大家都在詢問主機商價格、穩定性、技術支援相關的問題。而我，也被許多站長建議不要自架網站，因為突然發生硬體問題的話，很麻煩；而且還要解決軟體與作業系統之間相容性與設定的問題。一開始，也半信半疑自己是不是把架網站想得太簡單了?!很幸運的是:

• 硬體問題:
  • 打通電話回家，就有人會處理。
• 軟體問題:
  • 爬文後，連上 VPN ， 使用 Windows 10 的【遠端桌面連線】進行問題排除。

不過這幾年下來，真的沒遇過幾次因為電腦軟硬體發生狀況，造成網站停擺。偶而才會遇到因 WordPress 或外掛升級，造成的相容性問題，必須當下連線處理。不過還是建議，假使是架設個人部落格的話，的確可以考慮自架主機；不過假使是公司行號網站的話，還是建議找專業的網站公司經營，省時省事又可以避免金流糾紛。

WordPress虛擬主機與自架主機配備比較

在前一篇文章中( 點我: 免費架網站 )有提到，使用桌上型電腦需要的電費，兩個月約 172.8 元。我們就來比較一下，租用主機真的比較划算嗎?常見的主機商有:

• Bluehost
• SiteGround
• HostGator
• Sugarhost
• Cloudways

因為 cloudways 的網頁，分類價格比較容易理解，所以就拿它當例子好了。最便宜的方案 10 美金 / 每月，所以兩個月就是USD 20 = 20 * 28 = NTD 560。只是最便宜的方案真的夠用嗎?

回頭來看兩個月電費 172.8 元的主機配備是長怎樣呢?

• CPU: i5-7500 四核心
• 記憶體: DDR4-2400 8GB*2
• 硬碟: NVMe SSD(Random Read/Write 速度可以參考: Samsung 970 EVO Plus)
• 顯示卡、網路卡: 主機板內建
• 作業系統: Windows 10 專業版(費用很貴嗎? 有興趣的話，可以問 Google 大師)
• 總費用: 忘了，不過一定是在兩萬元以內。因為當初買電腦的目的是一般家用影音的用途，所以也不需要有太特殊的零件。
• 免費軟體: XAMPP, WordPress
• 免費 SSL 憑證: ZeroSSL

曾經有一陣子也盲目追求 PageSpeed insight 的分數，所以申請了 CDN 服務、刪除不必要外掛、關閉華麗佈景主題的功能、試驗了無數個 Cache plugin…，但是卻一直無法做到像其他人分享的高分。無意間把 Cloudflare CDN 關閉後，使用 Chrome 來檢查網頁開啟狀態，很明顯看到大幅縮短了執行時間(假使與啟用 CDN 相比的話)。不過，圖片中的顯示的細項名稱與功能，我真的也不知道明確的解釋是什麼，只是明顯感受到網頁開啟時間大幅縮短了。

Step 1: WordPress匯出程式，資料庫匯出將資料備份到硬碟

在 WordPress 左邊工具列當中，找到【工具】->【匯出程式】->【全部內容】->【下載資料匯出檔】，將檔案先存到硬碟中，稍後需要在新主機將這份資料檔匯入。不過有一點需要注意的就是: 資料檔並不包含圖片!!!

要如何把所有圖片複製到新主機裡面呢?後續會有說明~

Step 2: 網站手動搬家先安裝XAMPP與WordPress到新主機

前往 XAMPP 官網下載新版安裝程式，接著到 WordPress 官網下載需要的安裝版本。當 XAMPP 安裝完成後，把解壓縮的 WordPress 檔案，全部複製到以下資料夾裡面 C:\xampp\htdocs\

再來就是開啟 XAMPP 控制面板，在 MySQL 右邊的 Admin 按鈕，進入 phpMyAdmin 新增 WordPress 資料庫。當資料庫新增完成後，打開瀏覽器，輸入: localhost，就可以開始安裝 WordPress 了。這一段過程有點繁瑣，說的不是很清楚，假使不懂得話，可以參考【在Windows 10 架設 WordPress】這一篇文章，裡面有完整 phpMyAdmin 與 WordPress 操作的完整圖文說明。

Step 3: WordPress匯入程式，複製網站到新主機

在執行 WordPress 匯入程式之前，我習慣會先登入 localhost 後，根據舊主機的網站狀態，安裝好:

• 使用的佈景主題
• 匯入佈景主題設定檔
• 使用的外掛
• 設定好外掛參數

這樣一來，當執行完 WordPress 匯入程式後，就會發現新舊主機的網站樣式，除了小工具( Widget )之外，其餘的部分幾乎是一模一樣。現在，就在 WordPress 左邊工具列當中，找到【工具】->【匯入程式】->【立即安裝】->【指定之前備份檔案的路徑】，按下匯入之後，需要等待一段時間。我發現在區域網路的話大約要花 50 分鐘，但是在網際網路下大約要 2.5 小時左右。完成後，再來針對所有的小工具( Widget )進行設定，然後就只剩下最後一步就可以完成網站搬家了!

在這裡說明一下，事實上 WordPress 內建的匯出程式是無法直接匯出媒體檔案，但是可以被匯入。所以我們在執行匯入程式的過程中，匯入程式會從舊主機的網站中下載媒體檔案到新主機的網站裡面。從之前備份出來的檔案中，可以發現媒體網址的連結是現在上線的網址(以我的例子就是: https://hipay0.com/abcxyz)，而新主機的網址是https://hipay0.com/abcxyz。完成以上動作，才是把所有的媒體檔案複製到新主機中的做法。

也看到有人建議從舊主機中複製 C:\xampp\htdocs\wp-content\uploads\ 的所有檔案到新主機中，比較省時間。但是我不喜歡用這種方式，因為在架設網站過程中，難免會針對圖片改來改去，每改一次大小尺寸， WordPress 或圖片最佳化外掛(Smush)就會新增新的圖片大小在資料庫當中，而其餘大小的圖片是不會自動被刪除的。時間久了，無用的圖片當然會變多，這樣會增加管理的複雜度，同時定期備份檔案也會變得越來越大。

Step 4: WordPress換網址與改域名

網站搬家的最後一步，就是在資料庫當中，把所有 https://hipay0.com 的網址，更新成未來想上線的新網址，也就是執行WordPress換網址。登入 phpMyAdmin 後，

• 點選 WordPress 資料庫
• 點選 SQL
• 輸入 SOL 指令
• 點選執行

UPDATE wp_options SET option_value=REPLACE(option_value,'https://hipay0.com','新網址');
UPDATE wp_posts SET post_content=REPLACE(post_content,'https://hipay0.com','新網址');
UPDATE wp_posts SET guid=REPLACE(guid,'https://hipay0.com','新網址');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'https://hipay0.com','新網址');

完成後，只需要再做以下幾個步驟就可以完成網站搬家了~

1. SSL 憑證、httpd.conf，複製到 ..\xampp\apache\conf\ 的資料夾當中
2. httpd-ssl.conf，複製到 ..\xampp\apache\conf\extra\ 的資料夾當中
3. .htaccess、ads.txt、robots.txt、wp-config.php、Google與Bing的認證檔案，複製到 ..\xampp\htdocs\ 的資料夾當中
4. php.ini，複製到 ..\xampp\php\ 的資料夾當中
5. config.inc.php，複製到 ..\xampp\phpMyAdmin\ 的資料夾當中
6. 假使是使用子主題的話，再把子主題檔案複製到 ..\xampp\htdocs\wp-content\themes\astra-child\
7. 路由器設定好 Port forward

Astra theme客製化程式分享

OceanWP佈景主題值得繼續使用嗎?

在考慮更換新主機之前，已經使用 OceanWP 佈景主題兩年多的時間了。當初之所以會購買 OceanWP ，不外乎爬文後做的決定，原因如下:

• OceanWP 是以網站速度為第一優先考量的佈景主題
• 當時有提供買斷方案
• 能自由選擇喜歡的頁面編輯器來搭配，當時購買時有附贈精簡版的 Elementor
• 屬於多用途的佈景主題

但是，為什麼現在會決定更換成Astra Theme呢?以我的例子而言，除了是遇到了幾個無法解決的問題之外，當然也有嘗鮮的心態想試試其他佈景主題。以下是我更換的理由，分享給大家囉:

• 預設的 OceanWP 佈景主題中，提供太多 CSS 與 JS 功能，即使關掉後，對於 PageSpeed insight 的分數沒有太明顯差異。當然，實際網頁開啟的速度才是重點，所以在關掉多餘的 CSS / JS 功能後，開啟速度感覺還是一樣。
• 當初購買時，有些外掛是免費提供。但是之後 OceanWP 開發商改變授權方式，導致除了 Sticky header 能繼續使用外，其餘外掛都需要付費購買。這樣子就跟當初評估購買 OceanWP 的成本考量，就有很大的落差。評估後，選擇拿掉那些已經在使用的外掛功能。想也知道，花了很多時間修改網頁，同時網站瞬間也失去美感了。
• 附贈的 Elementor 頁面編輯器，容易發生不相容的狀況，導致使用 Elementor 編輯的網頁，排版嚴重被破壞。所以在 WordPress 版本更新或使用中的外掛升級時，特別擔心會不會又要崩潰一次了。上班族真的沒有那麼多時間，可以及時處理這些意外。

後悔使用Astra theme嗎?

去年年底時，看到了我一直都很依賴的一個社團在介紹【黑色星期五 Black Friday】購買清單，我會喜歡這個社團是因為站長大多都會使用過，然後把心得寫成文章，分享給大家，這一點就跟其他眾多社團有很大的差異。【一個是分享使用心得，再賺取分紅】 vs 【一群站長只知道分享購買連結/葉佩雯，賺錢擺第一】。所以看完分析的文章後，就決定試試Astra theme，來取代目前的 OceanWP。

使用Astra theme近一個月的時間，發現介紹這個佈景主題的繁體中文文章，幾乎都著重在產品比較的等級( OceanWP vs Astra vs GeneratePress )或是介紹它的優缺點。幾乎找不到有人分享程式碼，將網頁改得更美。所以以下就貼上幾個爬問後，應用在我的部落格的程式碼跟大家分享。

如何刪除Astra theme預設的上頁、下頁連結呢?

在開發商的討論區有現成的程式碼，假使不喜歡預設的【Next post】與【Previous post】，可以將以下程式碼貼到子主題的 functions.php 當中。

add_filter( 'astra_single_post_navigation_enabled', '__return_false' );

停用WordPress預設的延遲載入圖片功能(Lazy Load)

有很多外掛都有提供 Lazy Loading 的功能，是否會與 WordPress 的預設開啟造成衝突還不知道，保險作法就是關閉預設的延遲載入圖片功能。當然，假使主機效能夠強大、不在乎 pageSpeed 分數的話、有開啟 CDN 服務，關閉延遲載入圖片功能，就更不需要考慮了。不過正確的觀念是: 【延遲載入圖片不應該對網頁產生視覺影響，進而影響使用者體驗】。所以，這個功能不是用來補償【佈景主題程式碼寫得很差】或是【主機效能不強大】的缺點。

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

如何在Astra theme中，加入相關閱讀文章( Related Posts )

使用過 OceanWP 後，才發現【相關文章(Related Posts)】的功能，並不存在於Astra當中。假使不使用外掛的話，只能加入相關程式碼到子主題當中。一般而言，【相關文章(Related Posts)】的優點有:

• 提高使用者體驗
• 對 SEO 有幫助
• 降低跳出率

所以，要實現【相關文章(Related Posts)】的功能，需要三個步驟:

1、在 functions.php 加入以下程式碼

function related_posts($args = array()) {
    global $post;
    $args = wp_parse_args($args, array(
        'post_id' => !empty($post) ? $post->ID : '',
        'taxonomy' => 'category',
        'limit' => 5,
        'post_type' => !empty($post) ? $post->post_type : 'post',
        'orderby' => 'rand',
        'order' => 'DESC'
    ));
    if (!taxonomy_exists($args['taxonomy'])) {
        return;
    }
    $taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids'));
    if (empty($taxonomies)) {
        return;
    }
    $related_posts = get_posts(array(
        'post__not_in' => (array) $args['post_id'],
        'post_type' => $args['post_type'],
        'tax_query' => array(
            array(
                'taxonomy' => $args['taxonomy'],
                'field' => 'term_id',
                'terms' => $taxonomies
            ),
        ),
        'posts_per_page' => $args['limit'],
        'orderby' => $args['orderby'],
        'order' => $args['order']
    ));
    include( locate_template('related-posts-template.php', false, false) );
    wp_reset_postdata();
}

2、在子主題得資料夾中，新增檔案: related-posts-template.php

<?php if (!empty($related_posts)) { ?>
    <div class="related-posts">
        <class="widget-title"><h3><?php _e('延伸閱讀', 'astra'); ?></h3>
        <ul class="related-posts-list">
            <?php
            foreach ($related_posts as $post) {
                setup_postdata($post);
            ?>
            <li>
                <a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                    <?php if (has_post_thumbnail()) { ?>
                    <div class="thumb">
                        <?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?>
                    </div>
                    <?php } ?>
                    <h6><?php the_title(); ?></h6>
                </a>
            </li>
            <?php } ?>
        </ul>
        <div class="clearfix"></div>
    </div>
<?php
}

3、在 Astra 中呼叫【相關文章(Related Posts)】的程式

因為我只想要在文章(post)當中，顯示【相關文章(Related Posts)】的功能，所以要把佈景主題的 single.php 複製到子主題當中，然後在 single.php 加入以下紅色標示的程式碼:

<?php
/**
 * The template for displaying all single posts.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package Astra
 * @since 1.0.0
 */
if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}
get_header(); ?>
<?php if ( astra_page_layout() == 'left-sidebar' ) : ?>
	<?php get_sidebar(); ?>
<?php endif ?>
	<div id="primary" <?php astra_primary_class(); ?>>
		<?php astra_primary_content_top(); ?>
		<?php astra_content_loop(); ?>
		<?php astra_primary_content_bottom(); ?>
		<?php related_posts(); ?>
	</div><!-- #primary -->
<?php if ( astra_page_layout() == 'right-sidebar' ) : ?>
	<?php get_sidebar(); ?>
<?php endif ?>
<?php get_footer(); ?>

網站速度優化

平心而論，自架網站還有一個不如虛擬主機的地方，那就是網速!在臺灣，大部分家用寬頻速度不論是光纖或Cable modem或社區網路，其實上傳速度都不如虛擬主機使用的專線。雖然是有影響，但是好像也沒那麼致命。因為便宜的虛擬主機方案，絕對也不可能是高網速的服務；再者，在前面 【Chrome 開啟網頁的時間】那張圖片中，我也看不出來目前使用的光纖網路，在速度方面哪邊還可以改善。所以，就決定在現有架構下，繼續使用好了。除非有一天，又看到有人詳細分析的結論，讓我想到可以改善的地方，再來找替代方案好了。下圖是目前網站 PageSpeed Insights 的分數，通常我只看【最佳化建議】的部分，針對缺失的項目，爬文找答案盡量改善就好了。【分數】真的不是重點，【網頁開啟速度】才是真實的感受。

Astra theme的 PageSpeed Insights 優化結果

首頁是使用古騰堡外掛 Qubely Pro 編輯完成的，剛開始很滿意這個外掛的功能，方便又直覺而且提供的工具也很豐富。但是過一陣子之後，才發現Astra theme與 Qubely Pro 似乎有一個小問題(後面會說明)。即使聯絡了雙方開發商，反映問題，也還沒有明確的結果。所以目前還在爬文中，尚未找到答案。即使是這樣子，分數看起來也還可以接受；實際的網頁開啟速度，比之前使用 OceanWP + Elementor 來的快一點。

PageSpeed Insights 的真實使用者體驗結果

在 PageSpeed Insights 中會使用真實資料（Field data）來測試，這些資料是使用真實的使用者資料來驗證，更能貼近真實使用者的經驗。在前一段有提到【Astra 與 Qubely Pro 似乎有一個小問題】，其實就是下圖中 CLS 的統計數據( Cumulative Layout Shift 或累計版面配置轉移 )。

新網站上線約半個月左右，收到 Google Search Console 的通知，所有桌面板的網頁， CLS 值都大於 0.1 秒。花了一些時間觀察、爬文，才發現是 Qubely Pro 的相關編輯功能語法，造成頁面會發生移動的現象。尤其是當Astra Sticky header 與 Transparent header 被停用時，特別容易看到這種頁面位移的結果。目前沒找到答案，短期解決方法是: 啟用 Transparent header + 停用 Sticky header，搭配 Smush 外掛，把造成【大量版面配置轉移】的 Class ，填入 Smush Lazy Load 排除清單當中，是目前找到降低 CLS 影響的最佳方法。。

PageSpeed Insights 的最佳化建議清單

其實剩下這些最佳化建議清單的內容，都是需要動到程式碼，已經超出我(極新手^_^..)的能力範圍了，我選擇投降!畢竟，網頁開啟速度也不差，網頁也具有基本美感，這樣就夠了~

自架網站流程

使用Astra theme的常見問題

在社團中，以上這幾點還蠻常看到有人發問。最後，希望這篇文章，能夠幫助到需要【網站搬家】或【加快網頁開啟速度】的你~