架站勤拿手

在Elementor中自動播放音樂

				
					<audio class="myaudio" controls  loop>

        <source src="https://0800happy.com/wp-content/uploads/2023/07/%E9%99%B8%E8%BB%8D%E8%BB%8D%E6%AD%8C-%E6%BC%94%E5%A5%8F%E6%9B%B2.mp3" type="audio/mpeg"/>
        Your browser does not support the audio element.
</audio>

<script>
( function($) {
$(window).load(function() {
//======================================

 $("body").one("click", function() {
                console.log("Auto play");
                var audioElement = $(".myaudio")[0];
                audioElement.play();
                $(".myaudio").click();
            });
   

//======================================
}); //end load
})(jQuery);
</script>

            
				
			

07_其它可加入的建議

前言

基本的形象網站完成後，也代表網站可以正式上線了，但在上線之前請再參考以下的建議項目，有需求的話可酌加入網站中。

建議

1、*安裝資安防火牆

這件事是必做的，請參考《網站上線後要做的事(1)-安裝資安防火牆》。

2、*網站打包備份與搬家

若網站一開始在測試站台或本機站台製作，完成設計後就得打包下載備份檔後再搬去正式網站，或從學校的練習網站打包至本機端站台，就可以參考下列方式:

《[全站搬家]網站打包檔下載(備份)+打包檔重新上傳(還原)-使用All in One WP Migration》

3、*更改主管理員Email

《更改主管理員Email的二個方式》

4、*網站系統更新

《網站上線後要做的事(2)-不定時更新至最新版本》

5、GA分析

若有申請GA流量分析，可參考此篇《如何申請GA流量分析並串接在全站?》。

6、Google Console

若要研究關鍵字搜尋的流量來源，請參考此篇《【關鍵字工具】快速驗證Google Console與提交Sitemap》。

7、輔助小外掛

1. Simple Scroll To Top WP (回到頁面上方)
2. Slim SEO (簡約版的SEO外掛)
3. WP Rollback (把免費版外掛降版)

[圖片]應如何選擇適合網頁呈現的尺寸？

前言

影響網頁速度的很重要原因之一就是「圖片」的檔案太大或尺寸太大，所以我們在「上傳」之前須先把手上的圖片素材先檢查一下，有過大的請先處理後再上傳至網頁中。

說明

圖片檔案的大小

一張圖片若是好幾「Mb」，絕不能直接放到網頁中，這會很嚴重影響網頁載入速度，張數一多的話更是網頁載入速度的惡夢，所以「圖片的檔案大小」至少要控制在「kb」後再上傳。

圖片尺寸影響「檔案的大小」

所謂的尺寸，指得是圖片寬、高的尺寸，寬、高的尺寸的大小也會影響「檔案的大小」，故也需注意合適的尺寸。

圖片尺寸應多少為佳 ？

我這邊簡單來區分成「左右滿版用途」與「非左右滿版的背景」來做為兩大區分，並以「控制寬度」為主，因為在電腦、平板、手機這不同裝置上，主要就是寬度的差異，響應式網頁的精神也就是在對寬度的差異產生出不同的排版變化。

以後選擇圖片，就把握以上原則，理論上可以適用各種網頁了。

長方形圖片vs直立式圖片

一般用來當「背景」或點綴文案的用圖，比較少用「直立式」，都會以「長方形」或「偏正方形」為主，尤其是在選用左右滿版的背景圖時。

若選用「直立式」圖片當背景圖，由於寬度不夠，其背景圖的寬度可能會被拉伸造成解晰度問題或造成圖片下方被裁切到之類的。

假設你要在網頁上秀出自己的拍照作品，例「人像」，這人像照片本身可能就是直立式圖片，那就另當別論了。

12_Elementor基本切版之整理與複習

前言

Elementor編輯器，在了解它的基本用法後，這些是基本功要摸熟，後面進度才有辦法跟頁面設計、文章模版設計做配合。

這邊列出未來在設計任何頁面或版型時的基本起手動作。

整理1 : 頁面切版的起手式(從大容器包小容器開始)

至少先

• 外層Container容器全寬100%包一個 內層Container容器全寬80%(或1100 px)(內層容器最好是用全寬以利設定背景色不會左右延展) 

  

• 在外層Container容器設定水平與垂直置中。
• 再去從內層小容器細切想要的版型與設定排列方式。

整理2 : 所有的排列方向或對齊，都是從「上一層容器」去處理

切版後，會有外容器包內容層器或包元素，只要是「同一層」中的所有元素的水平或垂直排列、或置左、置中、置右之對齊，都是找上一層容器去做設定。

只有少數元素工具也會有自己的對齊功能，例如「按鈕、標題、內容編輯器、選單」，但因容器中可能不只一個元素存在，故對齊的設定我們會統一從「上一層容器」去做對齊的設定較為方便。

整理3 : 把預設間距歸0

每個容器都有Gap、外距、內距的設定區，預設都內建數值，若遇上較元素較多時需要精密的排版時，會發現有時候容器中很多保有一些間隙無法調整或縮小，此時需要做一下間距歸0的動作。

(1)Gap:歸0

『Gaps』，是當位在Container容器內部中，所有的元素與元素之間的預設間距或是「我與同一容器中隔壁鄰居」的預設間距，一般會先歸0。

(2)外距內距歸0

Container/進階之外距內距歸0，

即邊界、邊框間距，先點迴紋針後都填0。

為何建立一個容器Container時要做一堆的歸0，是為了避免不必要的間隙，後續再視情況設定適當的給值。