Apple 2022秋季發佈會將在9月8日登場

  硬件   : 2022-08-25    : 森心    : 213

蘋果正式宣佈 Apple 2022 秋季發佈會將在 9 月 8 日港台時間 1 點正式登場,並會在Apple Park進行在線直播。本次活動的Slogan是「Far Out」。

Apple 2022秋季發佈會

今回的發佈會最受矚目的將會是 iPhone 14 系列手機和 iOS 16 操作系統,根據先前傳聞指出 Apple Watch Series 8 與 AirPods Pro 2 等多達 14 件全新產品有望一同登場。

iPhone 14 系列今年將有四款,分別是iPhone 14 (6.1吋)、iPhone 14 Max/Plus(6.7吋)、iPhone 14 Pro(6.1吋)和iPhone 14 Pro Max(6.7吋)。另外配色部分亦有傳聞指出 iPhone 14 有望迎來全新紫色機型,取代原有的天峰藍色調。

Apple 2022秋季發佈會 1

搭載 Apple M2 處理器的新款 MacBook Air 和 MacBook Pro 亮相

  硬件   : 2022-06-07    : 森心    : 477

蘋果(Apple)在今年舉行的 WWDC 2022 當中發表了自家研製的 M2 晶片內容, M2 晶片採用了第二代 5 奈米製程技術,CPU 方面速度提升快達 18%,而GPU 效能提升最高達 35%,神經網路引擎則快達 40%。而隨著 M2 自研晶片的公佈,Apple 自然也發表了與之配套的新電腦。這次的新機出人意料地有兩款,MacBook Air 和 MacBook Pro 13 inch。

新 MacBook Air 規格上,除了搭載Apple M2 處理器,更可選最高十核心 GPU、24GB 記憶體和 2TB SSD。螢幕方面,採用 13.6 吋的 Liquid Retina Display 螢幕,亮度最高可達到 500 尼特。機身造型方面更貼近 MacBook Pro設計,它的頂部中間也有跟 Pro 相同的瀏海缺口,裡面藏著 1080p 的 FaceTime 相機。機身重量為1.24kg 、11.3mm 厚的機身依舊輕巧,左側除雙 Thunderbolt 外還加回了 MagSafe 充電埠,右側也有和 Pro 一樣支援高阻抗耳機的 3.5mm 插孔。另外電源鍵也整合了 Touch ID 指紋辨識功能。續航力方面,官方宣稱最多可使用 18 小時,筆電標配新的 35W 雙 USB-C 充電器。裝置也支援 67W 快充,能在半小時充入 50% 的電量,有需要的使用者可以另購對應功率的原廠雙 USB-C 充電器。

而新 13 吋 MacBook Pro,配備了支援 P3 廣色域的 Retina 顯示器、FaceTime HD 相機及錄音室等級麥克風。續航力方面,可使用長達 20 小時。規格方面可選配最高十核心 GPU、24GB 記憶體和 2TB 硬碟。

搭載 Apple M2 處理器的新 MacBook Air 的售價為 US$1,199起,新 MacBook Pro 13 inch 售價 US$1,299 起,兩款新筆電預計將於 7 月起發售。

蘋果測試幾款配備下一代 M2 晶片的新MAC

  硬件   : 2022-04-16    : 森心    : 736

根據開發者日誌,蘋果已經開始對幾款配備下一代 M2 晶片的新 Mac 機型進行廣泛的內部測試。開發者記錄檔裡顯示了 Apple 已經在至少 9 款的 Mac 機型上,測試 4 款不同的 M2 晶片組,新機的推出日期也似乎已在靠近了。

蘋果 M2晶片

M2 MacBook Air :
其內部代號為 J413,M2 MacBook Air 將會具備 8 核心 CPU 和 10 核心 GPU 架構,同時據指 MacBook Air 的主體設計也會有大改變,包括更細的邊框、更多連接埠,同時更會引進 MagSafe 充電功能。

M2 Mac mini :
內部代號為 J473,此一機款將會搭載與 MacBook Air 相同的規格;另外還有一款代號為 J474 的 M2 Pro Mac mini 也在測試階段。

M2 MacBook Pro :
代號 J493,將會具備 M2 Pro 和 M2 Max 晶片、64GB RAM 版本的 14”、16″ MacBook Pro。M2 Max 晶片據指會升級為 12 核心 CPU、38 核心 GPU。

Mac Pro :
內部代號 J180,將會是 M1 Ultra 的續作,同樣會是 Mac Studio 上使用。

當然,以上提到的測試機種並不一定都會成為實際產品推出,但相信 M1 示範作的 MacBook Air、Mac mini 和入門級 MacBook Pro 會有較大機會在今年內有更新。

Intel Core i9-12900KS 處理器 4月6 日公開發佈 預期定價 799 美元

  硬件     PC   : 2022-03-31    : 森心    : 1,072

Intel 於3 月27 日在官方 Twitter 表示,將於 4 月 6 日凌晨 3 點正式發佈 Core i9-12900KS 處理器,情況就如 9 代 Core i9-9900KS 特別版本一樣,透過特挑低電壓體質的 ASIC,實現更高的核心時脈,E-Core Turbo 時脈會提升至 4GHz、P-Core Turbo 時脈則大幅提升至 5.5GHz,預計售價為 799美元。

Intel Core i9

Intel Core i9-12900KS 預期有著較好的體質可達到 5.5 GHz Turbo 時脈,具備 16 核心、8 P-core、8 E-core 的 24 線程,14MB L2 Cache、30MB L3 Cache。P-Core 時脈由原本 3.2GHz 至 5.2GHz,提升至 3.4GHz、5.5GHz,All-Core Turbo 由 4.9GHz 提升至 5.2GHz。E-Core 則由原本的 2.4GHz 至 3.9GHz,提升至 2.5 GHz 至 4GHz,但也因為高時脈的關係處理器基本功耗(Base Power)提升到 150W,Turbo Power 則保持在 241W 水平。

目前得知Core i9-12900KS 售價為 US$799美元相較 12900K 售價 US$589 價格貴上不少。

3月份顯示卡價格回落 預期 4 月底再跌至 MSRP 建議售價水平

  硬件     PC   :    : 森心    : 1,129

3DCenter 27 日公佈顯示卡價格調查結果指出,顯示卡價格已經連續三個半月下跌,現時已處於 15 個月以來的新低點,回到 2021 年初的水平,相較 MSRP 建議售價只高出 25%,市場預期顯示卡價格 4 月底至 5 月有望回到 MSRP 建議售價。

3月份顯示卡價格回落

目前,NVIDIA RTX 30系列、AMD RX 6000系列的平均售價相比官方建議價格分別高出41%、35%,基本恢復到了去年初的水平。雖然還是很不合理,但已經好轉許多,要知道去年底的時候溢價幅度還都在80%以上,而在去年5月份,一度分別高達離譜的218%、116%!比降價更讓人欣喜的,是供貨量持續改善,相比去年初簡直是天壤之別。

更有業者更預期 4 月底至 5 月初,顯示卡甚至會回到 MSRP 建議售價水平,不過這只是猜測,真實情況如何還是需要觀望。

3月份顯示卡價格回落 1

Cloudflare 的防火牆設定

  web   : 2022-02-19    : 森心    : 1,590

Cloudflare 的防火牆是一道在攻擊者對你的網站攻擊前的最前防線,今天我們來探討一下Cloudflare 的防火牆對有關網站安全性的設定事宜,比如你的網站遭受攻擊,你可以在那裡調整安全級別? 如何建立針對 IP 地址或地區的黑名單等等。

Cloudflare 的防火場設定

首先,我們先來看看如果你的網站突然受到像是 DDos 類的攻擊,你可以如何去阻止攻擊。在Cloudflare 裡有一個 “I’m Under Attack!” 模式,位置是 防火牆 > 設定 > 安全等級 > 選單下拉到最後一個,又或者是在管理頁面的首頁 > 快速動作上點選。“I’m Under Attack” 為受到攻擊且需要 DDoS 保護和緩解的站點添加額外保護。如果在攻擊期間已啟用此功能,訪問者將在Cloudflare分析流量時收到插頁式頁面大約五秒鐘,以確保其是合法的訪問者。

Cloudflare 的防火場設定

說完緊急應對措施,我們接下來就談談如何預防攻擊。如果你是使用Cloudflare 的免費服務,那麼它的防火牆就只給你5條設定規則的限定,不過對於一般的個人網站來說都夠用了,小編有2個設定規則可以給大家參考,當然你自己也必須了解你的網站是不是需要才跟著設定喔!

第一個,我們先來對一些比較敏感的網站頁面來做預防,假如你是用Wordpress來架設網站,那麼一些包含 wp-admin 或是 wp-login 字眼的後台頁面就應該限制其他人進入訪問。方法是去防火牆 > 防火牆規則 > 設立一條新規則。

如果你有一組固定的IP, 那麼你就可以在規則的欄位選擇 : IP > 不等於 > 你輸入的IP ,意思是除了你輸入的那個IP,其他的IP都會被封鎖不可以進入,當然如果你沒有固定的IP也可以嘗試設定為只有所在地區或國家的IP可以進入。這樣做可以幫你阻擋掉 70% 的攻擊,減少了很多煩人的打擾。再來點選 “and” 或是 “及” 會出現一個新的輸入欄位 跟著設定為 URI > 包含 > /wp-admin。意思是除了你設定的IP 或是地區其他的都不可以進入到後台的頁面。

再來我們可以設定一條防止一些威脅IP的登入,眾所周知一些個人的小網站如果遭受到 DDos 類的攻擊,可能一下子就被攻破了,而我們又不可以24小時盯著,所以只好做一點點的防範措施了。做法是設立一條新規則,把一些威脅分數高的IP (威脅分數(cf.threat_score)是 Cloudflare 用來確定 IP 信譽的分數。範圍是 0(好)到 100(差)) 或是不知名的robot 限制它們進入。

在這裡小編要提醒一下,Cloudflare 的防火牆雖然強大,但不是100%可以阻擋所有攻擊,在你的伺服器上最好還是架設多幾重的防火牆會比較好。

為什麼大部份玩家都反對遊戲染指 NFT ?

  新聞   : 2022-02-06    : 森心    : 1,853

為什麼大部份玩家都反對遊戲染指 NFT ? NFT 又是什麼? 今天我們嘗試用遊戲玩家的角度去探討一下 NFT 到底對遊戲界帶來了什麼好處和壞處呢?

為什麼大部份玩家都反對遊戲染指 NFT ?
圖片來源:Christie’s

首先小編要申明一下,以下內容只代表個人觀點喔! 有問題可以在下方留言一起討論。

我們開始前先要了解什麼是 NFT。在網上查找到的消息指 NFT (Non-Fungible Token) 中文翻譯是「非同質化代幣」是一種「不可替換代幣」,它與一般Token的特性比如「比特幣」這類加密貨幣概念上是相反的。NFT 非同質化代幣具有不可分割、不可替代、獨一無二的特性。舉個例子,如果我有一張100元的貨幣,而我想跟朋友換另一張100元的同一種貨幣,因為價值相同,朋友會比較願意跟我換。不過,如果朋友手上的100元是銀行發行的一個紀念版紙鈔而且有「8888」這樣獨一無二的編號,那麼他就不願意跟我換了,因為那張100元紀念版紙鈔上的特別數字編號意味著它是特別的﹑稀有的,無法被互相替代的其意義就已經比100元這個價值高。

NFT 是透過區塊鏈的方式來證明一件虛擬物品的所有權並付予其獨特性,因為區塊鏈有著「無法被篡改」的特性,因此可以確保每枚 NFT 會是獨一無二,無法被仿造的。NFT被公認的原因有幾點,一是公開透明化,其資料記錄在區塊鏈上,所有人都可以查詢NFT的出處、發行數量、轉手紀錄、是否經過第三方單位驗證等資訊。二是「防範偽造」,NFT的功能就像是一個「數位鋼印」,確保消費者在網路上購買的虛擬產品是正版的,維護產品的稀缺性與收藏價值。三是「流通性高」,NFT可以在任何拍賣所中交易,購買者除了能真正擁有使用權,日後脫手也容易。四是「資產虛實整合」,NFT就像是現實與虛擬世界之間的橋樑,只要把現實物品貼上晶片,也可以直接用NFT的型式交易。

好了,說了那麼多 NFC 的好處,那麼大部份玩家為什麼都對NFT 那麼反觀呢? 這不是空穴來風,我們來看幾個例子。

  1. 一家工作室公開譴責《百戰天蟲》開發商Team17的NFT計畫並終止合作關係,受到網友熱烈的歡迎並收穫10萬點讚。
  2. 被譴責的Team17最終宣布放棄NFT計畫。
  3. 《胡鬧廚房》開發商承諾永不涉足NFT的聲明收到大量點讚。
  4. 遊戲巨頭EA公司的CEO,曾在早前力挺NFT 遊戲開發,但在最新一次電話會議上也表達了對NFT的觀望和猶豫。
  5. 網友們開闢了一個新話題標籤 #TeamNoNFT# 來集中表達不滿。
  6. 《潛行者》系列的烏克蘭開發商公開NFT遊戲消息,僅僅90分鐘之後就取消了新作中的計畫。
為什麼大部份玩家都反對遊戲染指 NFT ?

在網上一眾批評聲音中可以看到玩家憤怒的原因有幾種觀點。第一種是出於興趣玩遊戲的人認為,引入NFT會讓遊戲變味,為了賺錢而玩會讓遊戲不再有趣,變成另一種「打工」。第二是遊戲物品非常難獲得,比如育碧公司在《幽靈行動:中斷點》中發行的NFT道具可以按遊戲等級和遊玩時間領取,其中一款限量的頭盔,角色需要玩上600小時才能解鎖。如果每天玩2小時,連續地玩也要10個月才能獲得。第三是區塊鏈對環境的破壞,有人表示「我不願意用毀掉整整一片森林的代價來換取遊戲裡一個道具」。第四是區塊鏈引起的金融詐騙猖獗,激起不少玩家反感。

為什麼大部份玩家都反對遊戲染指 NFT ?

法國公會 Solidaires Informatique更發了一篇聲明稱區塊鏈技術是「一種有害、沒有價值、毫無生態可言的技術」。聲明中寫道:「我們並非對 NFT 一無所知,相反我們是因為理解 NFT 才反對它。NFT 能帶來的是金融詐騙,它讓我們遠離電子遊戲的樂趣。區塊鏈所謂的「創新」只是用更多的電力做同樣的事情。」

除了玩家,遊戲程式設計師也加入了反對行列,他們紛紛表態 : “別在我的遊戲計畫中加入NFT” 。遊戲開發者 @maxnichols 就連發 20 條推文分析 NFT 對遊戲的影響,總結就是:

  1. NFT 對環境和社會都有不良影響。
  2. 現今的NFT遊戲,如果去掉NFT內容,光看遊戲表現要麼差到不行,要麼就跟沒加的遊戲水平差不多。
  3. 往遊戲中加入 NFT,會扭曲遊戲的設計初衷。
  4. 大多數玩家不喜歡邊玩邊賺錢模式。

雖然說遊戲廠商想要賺錢這沒什麼不好,甚至對於一些小遊戲廠商來說,如果他們賣 NFT 是為了賺點資金繼續做遊戲,這也沒什麼不對。可是玩家們太了解開發商的貪婪了,遊戲玩家質疑的是,遊戲只要跟課金掛上關係,就已經會產生很多問題,很多遊戲其最終目的已經不再是為玩家提供樂趣,而是變成為了賺取更多金錢而不顧一切。比如以《刺客教條 奧德賽》為例,育碧(又是你!育碧! )給遊戲加入了等級加速包,只要少許鈔票就能讓主角升級得更快。遊戲本就如此設計,那沒什麼,但是有玩家猜測如果是開發人員故意讓玩家覺得自己等級升得慢,而創造了等級加速包這一需求?那就是一種欺騙了。在現狀未有改善下,又跟NFT扯上關係,只怕問題會變得更嚴重了。

為什麼大部份玩家都反對遊戲染指 NFT ?

區塊鏈遊戲到最後會是像育碧副總裁說的那樣 “NFT 是一個好東西,只是現在的玩家不懂”? 還是玩家們的怒火把開發商的 NFT 計劃推倒? 我們還不知道結果,而NFT 這樣的新技術最後何去何從,就讓我們拭目以待吧。

UBISOFT 副總裁說 NFT 是好東西

  新聞     PC   : 2022-01-30    : 森心    : 1,993

2021 年 12 月 7 日 育碧 UBISOFT 是第一個公開進入 NFT 領域的大牌遊戲開發商。然而Ubisoft Digits 、NFT 和 Quartz 平台的推出可是並不順利。原因是遊戲玩家的不買帳,甚至乎到了激烈反對的程度。遊戲業界中的其他大品牌們對NFT的態度也是不溫不火。可不管怎樣,NFT的出現是遊戲界具有里程碑意義的時刻。

How Ubisoft Quartz and Digits can take NFT games mainstream:

育碧 UBISOFT 公司高層 Nicolas Pouard 和 Didier Genevois 近日接受了澳洲網站 finder.com 的採訪,談及了大量關於育碧 NFT 相關戰略的內容。當訪問者表達出,玩家們普遍不支持 NFT 的態度並對此表示擔憂時。他們的回答是:

Nicolas Pouard : 這是我們預期的反應。我們知道這不是一個容易掌握的概念,但 Quartz 實際上只是邁出更大的一步前的一小步。我們將圍繞第一個計劃繼續發布功能和服務,我們的信念是,我們的玩家會一點一點地揭示和理解這個謎題。我們希望他們能更好地理解我們為他們提供的價值。

當被問及 NFTs 到底給玩家帶來了什麼好處時:

Nicolas Pouard表示 :「我認為遊戲玩家並不瞭解數位二級市場能給他們帶來什麼。目前,由於 NFTs 的現狀和背景,玩家們真的認為它首先是在破壞地球,其次只是一個投機的工具。」

當被問及有很多遊戲玩家害怕 NFT 的原因,是新的微交易或新的戰利品箱 Digits 將使 Ubisoft 的遊戲變得更加昂貴。他們是對還是錯?

Nicolas Pouard表示 : 嗯,第一批玩家永遠是對的。因為他們是我們的玩家,我們愛他們,所以,他們總是對的。但是我要說的一點是,Digits是自主可選的,這是我們在遊戲經濟之外構建的東西。因此,你可以使用 Quartz,也可以選擇不使用它。這真的是個人選擇的問題,我們絕不會強迫我們的玩家使用 Quartz 和 Digits。我們只是通知他們,有一個新系統可以為他們提供比現有系統更高的價值。
「但是,我們(育碧)首先看到的是更遙遠的未來。最終目標是讓玩家在用完物品或玩完遊戲後有機會轉賣他們的物品。」他表示這對玩家來說真的是非常有利的一件事,只是玩家現在都還沒有意識到這件事。

全篇訪問的篇幅非常長,小編就不在文章裡一一細述,如果你希望知道更多關於訪問的內容,可以透過下方的連結觀看整篇訪問。

PHP require VS include

  php   : 2022-01-09    : 森心    : 350

在PHP 語言中如果你想插入額外的一段程式就會用到 require 跟 include 兩個函式。它們的功能相同,不同的是處理錯誤的方式。

require:
這個語法通常使用在程式檔案的一開頭,載入程式時會先讀取require引入的檔案,使其變成程式的一部分。以下是一段引入網頁CSS的範例:

require(“theme.css”);

include:
include功能跟require一樣,通常使用在程式中的流程敘述中,比如 「if … else」「while loop」「for loop」等。以下是一段引入其他 PHP 頁面的範例:

include(“function.php”);

require 跟 include的分別:
兩者的分別在當遇上錯誤時,require 會生成一個 (E_COMPILE_ERROR),並在錯誤發生後立即停止執行餘下程式。而include 則會生成一個 (E_WARNING),在錯誤發生後會繼續執行餘下的程式。

以一個網頁的代碼為例:

<html>
   <head><?php require("theme.css"); ?></head>
   <body>
   "Hello World!"
   </body>
</html>

如果require出現了錯誤,你將不會看到 “Hello Word!” 等內容,因為程式會在出現錯誤時就停止。

<html>
   <head><?php include("function.php"); ?></head>
   <body>
   "Hello World!"
   </body>
</html>

反之,如果include出現了錯誤你都可以看到 “Hello Word!” 等內容。

由於它們的特性,require比較適合引入靜態的內容例如 CSS,而include則適合引入動態的程式碼比如 PHP ﹑ INC等。

CSS List Style sample

  CSS   : 2022-01-01    : 森心    : 468

CSS List Style 是一個比較常用的敘列資訊的方式,通常都是用來列舉POINT FORM或是作為目錄時使用。可以一般常用的<ul><li>style 來來回回都是那一兩個。今天就分享一些小編會用到的List Style CSS 樣版。

一些傳統的圖案:

.one { list-style-type: disc; }
.two { list-style-type: circle; }
.three { list-style-type: square; }
.four { list-style-type: none; }

可以自訂字符 例如 “*” :

ul li { list-style: none; }
ul li::before { content: ‘*’;}

可以自訂線性漸變顏色:

ul li:before { background: linear-gradient(45deg, #fff0f6, #5f5d58); }

可以把文字加底色:

ul li {
list-style-type: none;
counter-increment: item;
}
ul li:before {
content: counter(item);
margin-right: 5px;
font-size: 80%;
background-color: #f9dd94;
color: #7eb4e2;
font-weight: bold;
padding: 3px 8px;
border-radius: 3px;
}

可以自訂自選圖案:

ul li {
  list-style: none;
  padding-left: 50px;
  position: relative;
}

ul li:before {
  content: "";
  position: absolute;
  top: 12px;
  left: 5px;
  display: inline-block;
  height: 30px;
  width: 30px;
  background-size: contain;
  background-image: url("imgages/xxxx.png");
}

SQL Injection 介紹與防範 PHP

  php   :    : 森心    : 824

「Structured Query Language」(SQL)是用來操作資料庫、存取出所需資料的一套「查詢語言」,SQL的範圍包括數據插入、查詢、更新和刪除,數據庫模式建立和修改,以及數據存取控制。Injection 是一種駭客常用的攻擊概念,透過注入惡意的程式碼的方式,破壞原本程式碼的語意,來達到攻擊的效果。以下是一個SQL injection 的例子:

$UserID = $_GET["id"];
$SQL = "select id ,name, passwords from usertable where id = '$UserID'";

以上的是一句簡單的SQL 查詢Database內容的命令,可是黑客透過Injection的攻擊手法把你的變數改成另一個不同意思SQL 的命令。

https://website.com/page?id=-1 OR 1=1
那麼你的SQL就會變成以下的情況:
$SQL = "select id ,name, passwords from usertable where id = -1 OR 1=1;"

以上的 “-1 OR 1=1” 語句是利用SQL 中 “OR” 特性,把你資料庫內所有資料都顯示出來。 如果你沒有採取任何的防範措施那麼你的網站資料庫內容就會被黑客看光光了。

那我們應該要如何防範SQL Injection的攻擊呢? 坊間很多教學都會教人使用 str_replace、strpos 等函式偵測、過濾例如「 ‘ 」、「 ” 」、「 空白」等特殊字元,甚至是過濾關鍵字「SELECT」、「UNION」、「AND」。但這樣是不足以防範惡意的駭客,因為繞過空白、單引號的字元是十分容易的。甚至mysqli_real_escape_string 函式也不建議,因為只要在參數串入 SQL 語句之前,用此函式先將欲串入的參數作過濾,它會將所有 SQL 的關鍵字元全部替換成跳脫字元,使其在 SQL 查詢中成為普通的字串,而非語句的一部分。

比較建議定方法是從源頭著手,使用Prepared Statement:

$conn = new PDO("mysql:host=$servername;dbname=$myDB", $username, $password);
$SQL=$conn->prepare('select id ,name, passwords from usertable where id = :UserID');
$SQL->bindValue(':UserID',$UserID,PDO::PARM_INT);
$SQL->execute();

Prepared Statement 會代替 SQL 語句進行預先處理,再利用它提供的 bindValue 或 bindParam 函式將欲查詢的參數的值或變數綁定上去,底層查詢時,其參數會保證作為數值傳遞,不可能成為 SQL 語句的一部分,也因此就不會產生 SQL Injection 的問題。

WordPress 如何隱藏 ADMIN BAR

  web     wordpress   : 2021-12-31    : 森心    : 1,680

相信有用WordPress建站的人對網頁頂的 “ADMIN BAR” 應該不會陌生,因為日常的網站管理內容都會透過它來快速完成。不過對於網站的營運管理者來說,卻常常希望把 “ADMIN BAR”隱藏起來,而這也是必要做的事。

WordPress 的”ADMIN BAR”可以給用家快速地進到網站的後台來更改網頁內容或帳戶資料,這原來只應該開放給管理者的權限,WordPress卻預設為開放給所有用家,因此我們就必須要動手把它隱藏起來,而做法有好幾種。

第一種方法: 可以利用WordPress 自建的帳號管理,在”工具列” (TOOL BAR) 那項UNTICK。這是一個方法,但卻比較笨,要手動去關閉每一個帳戶的”工具列”。

WordPress ADMIN BAR

第二種方法: 就是透過安裝 “Plugin” 的方式來處理,如果你對WordPress 的程式不是太過熟悉,建議採用”Plugin” 的方式來處理會比較好,簡單而且易用。

第三種方法: 是透過修改function.php 來處理,這個方式比較推薦給對程式較熟悉的用戶,因為修改function.php的動作如果做得不好,就會令全個網站出現問題。但用程式來控制會比較有彈性,你可以更改程式來達到自己想要的效果。如以下的一段程式碼,就是告訴WordPress,除了”administrator”帳戶外,把其他的帳戶上的”ADMIN BAR”都設為不顯示。

add_action('after_setup_theme', 'remove_admin_bar');
 function remove_admin_bar() {
   if (!current_user_can('administrator') && !is_admin()) {
     show_admin_bar(false);
   }
 }

有些時候修改function.php 也無法令”ADMIN BAR”隱藏起來,比如在普通用戶的用戶介面上。如果遇到這樣的事,我們可以嘗試修改CSS 來把”ADMIN BAR”隱藏起來。

#wpadminbar { display:none !important;}

WordPress 自訂 佈景主題 (Custom Themes)

  web     wordpress   : 2021-12-16    : 森心    : 2,274

今天我們來談談如何在WordPress上制作個人風格特色的網站。 如果你喜歡跟別人不一樣,希望擁有獨屬於自己網站的佈景主題 Themes,那麼希望這編文章可以給你一點點得幫助 :)接下來讓我們正式開始吧!!

首先在開始前,我要先聲明接下來的教學不適合新手服用,技術要求會比較高一點,需要有一定程度的建站程式知識,包括: HTML,Javascript,CSS,PHP ,Mysql(不是必須)和基本的WordPress 操作。在這裡我會先說一下傳統的WordPress 建站方式有兩種,一個是使用網上的 WordPress.com 來開發,另一個是使用WordPress.org ,這也是我們今天要講的主角。

wordpresslogo

使用WordPress.org來開發網站,你必須先擁有自己的一台伺服器主機,你可以是自己買,也可以是從網路上租用,關於伺服器主機方面是一個大主題,我先不在這裡多說了。接下來我們一步一步的開發網站吧。

第一步 : 在伺服器主機上安裝WordPress: 我們可以到 WordPress.org/download 上下載主程式,下載後在安裝前請先檢查 你的伺服器上有沒有以下幾個程式 Apache HTTP Server, MariaDB 或是 MySQL DB ,PHP 7.4。如果都確認安裝好這些程式後,我們就可以一步步的按照WordPress 安裝程式的指示來完成安裝。最後我們會得到一組 WordPress 進入後台的用戶密碼和 Datebase WordPress 專用的用戶密碼,請都妥善保存好他們。

佈景主題 control panel

第二步 : 當安裝完成WordPress 後,我們就可以在網址上輸入你的主機的網名加 /wordpress/wp-admin (例如 wantplay.com/wordpress/wp-admin) 來登入後台,用你早前安裝時設定的用戶和密碼來登入進去吧。進來後你就會發現在頁面左手邊有一個黑色的slide bar ,這介面是跟WordPress.com上是一樣的,我們常用的功能都放在這裡了。

第三步 : 正式開發我們的個人主題外觀。以前說到開發自己的主題Themes,你接觸到的多是教你到 Appearance (外觀) -> Themes (主題 ) -> 下載Themes -> 啟用 。我們自己開發主題就是不用下載人家的 Themes,我們動手自己做 🙂
首先我們到主機的WordPress 目錄 地址(例如: root\web\wordpress\wp-content\themes),進入themes 資料夾後,我們就會看到已經有幾個原生的主題,不用理會他們,在這裡新建一個資料夾作為你的網站主題名字,我在這裡就用wantplay 這名字建了一個,你們就按自己喜歡的改一個好名字吧。

佈景主題

第四步 : 建立幾個關鍵的文件。當你建了自己的網站主題資料夾後,在裡面建立幾個重要的文件 它們是 :
index.php
style.css
functions.php

我們要在 style.css 上要輸入一些資料 例如 : /* wantplay themes */ 這是用來告訴 WordPress 我們主題的名字,是非常重要的一步。 然後在index.php 上我們可以先隨便輸入一些文字 例如 : Hello World! 完成後,我們就可以返回到WordPress 後台,到 Appearance (外觀) -> Themes (主題 ) 。現在我們可以看到一個新的用我們命名的主題在這裡,點選它然後啟用它,再來到預覽頁面,如果你可以看到頁面上 ” Hello World! ” 的文字,那說明我們的主題已經成功了。之後我們就可以在它上面擴充文字內容,加圖片,加頁面,設定我們的CSS 等等。之後的一些開發教學我會慢慢的寫出來,那麼今期就先到這裡了,祝你有美好的一天吧 🙂

WordPress WP Smush Plugin 不能顯示圖片?

  web     wordpress   :    : 森心    : 2,148

在WordPress 上架設網站,我們少不了要上傳大量的圖片,不僅可以豐富網頁的內容,更加可以美化我們的頁面,吸引人的眼睛。 但是如果有大量的圖片顯示在網站上,可能會造成我們的網站速度變慢,這會是一個令人頭痛的問題! 要解這問題,其中一個方法就是安裝壓縮圖片的Plugin 工具。

wpSmush logo

小編自己就選裝了一個叫 “wp smush” 的plugin,這是一個在WordPress 上比較有名的Plugin,可以幫我們優化處理網站的圖片,加快顯示速度。有很多能人前輩已經詳細介紹過了,可是其中有一個問題小編問過 “Google” 大神,搜尋過各大論壇也沒有得到答案,而這個問題就是:

為什麼安裝了 WP Smush 後,網站上所有圖片都不能顯示了?

如果你是一個像小編一樣屬於 WordPress 上的小新手,而又喜歡自己制作個人風格的Themes,那麼你就有可能會遇上這個問題,而解決這問題的方法也很簡單。

.

在你的 header.php 加上 <?php  wp_head(); ?>

以及 footer.php 加上 <?php  wp_footer(); ?>

.

這個問題對於一些知道的人來說是很簡單,所以他們可能不會去討論。但對一些不知道的新人來說,是很難去捅破那一層紙得到答案,希望這編文章可以幫得到你 🙂 如果你也是架設網站的新手,歡迎你留言給小編一起來討論吧!!
祝你有美好的一天! 🙂

window 如何 大量更改圖片名字

  windows   : 2021-12-06    : 森心    : 783

大家好! 相信 window 用戶都會有這麼一個經驗,就是下載了大量的圖片或是其他文件可是它們的名字都不統一,想讓電腦按順序排例都不行,如果一個個地去改它們的名字,工作量又大到令人卻步。正好今天我要來跟大家分享一個在window上很好用的小技巧,讓大家輕鬆大量更改圖片名字並按名字順序排列。

首先打開一個資料夾把你想要更改的圖片﹑文件放進去。這裡要說明一下,如果你是想按下載時間來排序,那最好是在下載的那個原資料夾裡操作。

window 大量更改圖片名字

接著全選你要更改名字的檔案,然後把鼠標指向第一個檔案,再來按「重新命名」按鈕或是按快捷鍵 F2 也是可以。

window 大量更改圖片名字

按下按鈕後你就可以輸入你想要更改的名字,比如圖中我改了個名字叫「A1」。

window 大量更改圖片名字

最後按下Enter 就完成了,你就可以把圖片批量的更改成你想要的名字了。如果你突然不想更改了,這時候按 Crtl + Z 就可以回復原來的名字。

window 大量更改圖片名字

WordPress functions.php 的實用介紹

  web     wordpress   : 2021-12-01    : 森心    : 1,778

大家好! 有一段時間沒有來更新電腦技術分享的文章了,今天我們就來說說WordPress 裡一個很方便也很重要的功能或是說一個檔案 functions.php。

WordPress的佈景主題中開放了一個叫做functions.php的檔案,是給那些原本要透過外掛或者是修改系統檔程式的動作,現在都可以直接放在functions.php裡面了,只要把你想要的代碼放到這裡,就可以全站通行。未來若遇到版本升級也不用全部重新再做,而且集中管理了就不用再慢慢的在分散的代碼裡去找了,真的是很方便。

我們可以用一個例子來說明functions.php 的功能,它的運作原理是透過WordPress系統本身的「add_action」函式加上wp_head和wp_footer 來達成想要的的效果。舉個例子:

//add the custome menu bar
function add_new_menu() {
    register_nav_menu('newMenu',__( 'newMenu' ));
  }
add_action( 'init', 'add_new_menu' );

我們想新增加個一個function叫 add_new_menu,作用是要註冊一個新的選單。 在function 的下面我們可以看到一句add_action(); 的代碼,就是因為這句WordPress 就懂得去執行你定義的新function。除了自己定義的functions,你也可以透過「add_theme_support」函式來使用WordPress本身的一些功能。

  1. ‘admin-bar’
  2. ‘align-wide’
  3. ‘automatic-feed-links’
  4. ‘core-block-patterns’
  5. ‘custom-background’
  6. ‘custom-header’
  7. ‘custom-line-height’
  8. ‘custom-logo’
  9. ‘customize-selective-refresh-widgets’
  10. ‘custom-spacing’
  11. ‘custom-units’
  12. ‘dark-editor-style’
  13. ‘disable-custom-colors’
  14. ‘disable-custom-font-sizes’
  15. ‘editor-color-palette’
  16. ‘editor-gradient-presets’
  17. ‘editor-font-sizes’
  18. ‘editor-styles’
  19. ‘featured-content’
  20. ‘html5’
  21. ‘menus’
  22. ‘post-formats’
  23. ‘post-thumbnails’
  24. ‘responsive-embeds’
  25. ‘starter-content’
  26. ‘title-tag’
  27. ‘wp-block-styles’
  28. ‘widgets’
  29. ‘widgets-block-editor’

舉個例子,比如我們在functions.php裡增加了一句add_theme_support( ‘post-thumbnails’ ); 那麼就通告了全站內的文章如果有設定了縮圖,就可以顯示出來。我們只要在想要的地方用這句 the_post_thumbnail(); 就可以把縮圖叫出來,在我們佈置版面時非常方便。致於其他的其能,大家如果有興趣也可以在網上找找看。

WordPress 黑客利用 XMLRPC 攻擊網站偷取帳戶? 3款外掛plugins 幫到你

  web     wordpress   : 2021-11-23    : 森心    : 1,805

大家早上好! 今天早上的我是被驚醒的,一大早打開手機看到由網站傳過來的安全通知郵件說,有人正暴力破解我的網站帳號密碼,我立即從床上跳起來,打開電腦查看一下,果然有人正在利用XMLRPC來攻擊。

login attack XMLRPC

從圖片中,我們可以看到有一些海外的IP 透過 wp_xmlrpc 的登入方式來嘗試暴力破解我們的帳號,不過幸好我早前有先安裝好一款防止被暴力破解密碼的外掛,它的名字就是 “Limit Login Attempts Reloaded”

Limit Login Logo XMLRPC

安裝了這個外掛,我們就可以設定好每個人登入我們的網站時可以嘗試輸入密碼多少次,超過了限定次數就可以鎖定它的IP,不讓它繼續攻擊。以下面圖的設定為例,我們限定了每個人可以嘗試4次登入,4次都失敗我們就把他封鎖一個小時,如果他連續4次觸發封鎖,我們就把他封鎖72個小時好了。這樣做,我們就可以大大的增加了攻擊者的時間成本,令他們失去耐性。

Limit Login Setting

不過單單是限制和封鎖,我覺得還是不夠的,我們得從源頭出發找出解決問題的方法。我們回到第一張圖查看,可以發現攻擊者都是透過 “wp_xmlrpc 登入方式” 來攻擊的,那麼什麼是wp_xmlrpc 呢?

XMLRPC 是 WordPress 的一個功能,在 3.5 版開始,預設會啟用此功能。它使數據能夠以HTTP 作為傳輸機制,XML 作為編碼機制。 由於 WordPress 不是一個自我封閉的系統,有時候會需要與其他系統進行通信。例如,你想從移動設備發佈文章到你的網站,你可以使用 xmlrpc.php 啟用的遠程訪問功能來做到這一點。xmlrpc.php 核心功能是允許你通過智能手機連接到你的站點,提供外部系統透過 XML-RPC API 執行遠端發文管理。常用外部服務例如 Blogger 或是 Pingback 等等,可與 XML-RPC 串接服務。
XMLRPC它提供了方便,但是同時也潛藏著安全風險,黑客之類的攻擊者會透過它來攻擊你的網站,所以如果你沒有必要使用它,最好還是把XMLRPC關閉起來以避免風險。

關閉 xmlrpc.php 功能有幾種方法,我就介紹2個比較多人使用也比較簡單的方法。
第一個方法是安裝外掛 (plugins) : Disable XML-RPC

Disable XMLRPC

你只要安裝好這個外掛,直接啟動,它會自動幫你關閉了xmlrpc,如果你想重開,選擇停用它就好。

第二個方法是在你的網站functions.php 上加上以下的一句代碼來停用。

add_filter('xmlrpc_enabled', '__return_false');

最後還有一個建議,攻擊者如果發現你關閉了xmlrpc,也有可能會轉移去攻擊你的 wp-login.php。如果是這情況你就可以加裝一個外掛,它就是: WPS Hide Login

hide login page

這外掛的功能是幫你隱藏了原本 wp-login 的 URL,然後它的設定裡可以讓你自己訂立你的Login 的URL, 讓攻擊者找不到入口攻擊。 好了今天就說到這裡了,希望你們都學會了。祝你們有美好的一天!

WordPress 的header 與及 footer 介紹

  web     wordpress   : 2021-11-22    : 森心    : 1,878

前一篇的技術文章我們介紹過了 WordPress template 和 content template 的功能,如果你還沒看過可以用以下連結來看看喔!

今天我們就接著談WordPress 的一些功能頁面,不過今天的會比較簡單些,它們就是header.php 跟 footer.php的介紹。

WordPress  header and footer


WordPress 的header.php 和 footer.php 是在建站中必須用到的部份。我們可以簡單的把WordPress的一個網頁分開成三個部分,它們分別是置頂的header.php 和置底的footer.php,而中間的就是用來顯示我們的網頁內容(Page) 跟文章內容(Post)的部分。

首先我們先來看看一個header.php的代碼:

<?php
/** 
* The header for our theme 
* 
**/?>

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
<head>
    <title>
       <?php echo get_bloginfo( 'name' ); echo get_bloginfo( 'description' ); ?>
    </title>    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="stylesheet">
</head>
<?php wp_head();?>
<body>
  <div class="nav_menubar">
                <?php 
                   wp_nav_menu( array( 
                              'theme_location' => 'menu01', 
                              'container_class' => 'nav-menu', 
                              'menu_class' => 'nav-menu' ) ); 
                 ?>
 </div>
  ........

還有一段footer.php 的代碼:

<?php wp_footer(); ?>
<div id="footer" class="Footer">
     <p class="itle">
             <?php echo get_bloginfo( 'name' ); echo get_bloginfo( 'description' );?>
     </p>
     <p class="stext"><?php echo privacy_policy.php ?></p>
     <p class="stext"><?php echo copy_right.php</p></div>
</div>
</body>
</html>

我們可以看到兩段代碼中一些互相關連的部分比如<html>和<body> tags,header 跟footer 貫通整個網站所有網頁,它們是每個頁面的組成部分,用來承載一些重複顯示的內容,比如網頁的名字,Logo,選單等等,把內容放在head跟footer上,我們就可以做到輕鬆地在每個網頁都可以顯示,而我們如果需要更改它們時就只要更改一次就全站都自動更新好。

需要特別注意的地方:
如果我們是在WordPress 使自訂個人主題時,就要留意在header.php 跟footer.php 裡面有沒有<?php wp_head();?>和<?php wp_footer(); ?> 這兩句代碼,一些WordPress 的功能比如 Top menu bar 和一些外掛(Plugin) 都需要有它們才可以順利執行。

WordPress 的 Template page 與 Content Template 的介紹與用法

  web     wordpress   : 2021-11-21    : 森心    : 1,629

大家好,接著前兩篇的WordPress 網站主題開發文章,我們今天來談一下WordPress 的一些在網站開發上經常會使用到的功能頁面與及介紹它們的功能和用法,這會是一個很重要的部份喔! 大家都來細心看看吧!

回顧我們在第一篇文章「 WordPress 自制個人主題風格 (Custom Themes)」介紹到的幾個重要頁面,我們再來詳細一點說說在WordPress 自訂自己的主題時,我們常常會觸及到的那些頁面,它們有但不限於:

  1. index.php
  2. functions.php
  3. style.css
  4. header.php
  5. footer.php
  6. template.php
  7. single.php
  8. search.php
  9. 404.php

以上的這一些頁面名稱就是WordPress 的重要功能頁面,我們可以透過覆寫這些頁面的內容來顯示我們自訂的個人主題介面。今天我就先來介紹 2 個我們必定會用到也常常會更改的兩個頁面 : Template page 及與它對應的 Content Template。 這兩個頁面的功能都是用來顯示一些我們在WordPress 上輸入的文章內容 (archive) 及頁面內容 (page)。但我們的網頁上可能會有一個以上或幾個的不同主題類別的文章,這個時候我們就會希望有能分門別類的指定頁面來顯示它們,可以令讀者更清晰來區分。舉個例子 : 我有一篇文章是用來分享一些關於WordPress 建站的技術文章,我把它歸到一個叫「技術分享」的類別。那麼我如果想要創立一個獨立的頁面來介紹它們,我就先要建立它的template page, 做法是去你的主題目錄下(例如 “wordpress\wp-content\themes\wantplay”),新建一個php file,我先叫它 “technologyshare.php” 好了,打開它並在它最開頭打上以下的代碼:

<?php
/*
Template Name: Technology Share
*/
?>

在以上的代碼中我們定義了一個新template name 叫 Technilogy Share 然後儲存好。我們轉到WordPress的後台,打開一個新 page 的介面,把Title 改成你想顯示的名字,我就叫「技術分享網頁」好了。在同一個畫面右手邊的欄位中找到「頁面屬性」(page attributes),在它裡面的Template欄往下拉就可以看到一個新的選擇 “Technology Share”。如果你把這個頁面(Page) 的Template 欄選擇了Technology Share,那麼所有經「技術分享網頁」這個Page 顯示的內容都會採用technologyshare.php 所設定的介面包括 (HTML, CSS, PHP 等等),就是說它會變成「技術分享」的類別的顯示指定頁面 Landing page。我們就可以加上HTML 跟CSS 裝飾成你想要的版面,最後我們就在”technologyshare.php” 裡面指定它會顯示什麼樣的內容模板content template,我們可以看看以下的代碼

<?php 
    while ( have_posts() ) : the_post(); 
        get_template_part( 'content', 'tmpl_archives' ); 
    endwhile; 
?>

get_template_part( ); 這個功能就是告訴系統從系統導入的文章內容在”technologyshare.php”裡會去根據你指定的模板來顯示。
那麼我們就回到”technologyshare.php” 相同的目錄下建了一個模板的檔案,首先建立一個PHP file 名字叫作”content-tmpl_archives.php”。檔案的名字是對應”technologyshare.php” 裡面的get_template_part( ‘content’, ‘tmpl_archives’ ); 呼叫功能的名字,”content” 對應 content,”-tmpl_archives”就對應指定的page 名字,改名時請多加留意。這一步做完後,我們就成功完成了一個Landing page。


有了Landing page 指定頁面後,我們就要去設定”content-tmpl_archives.php” 篩選會顯示什麼文章屬性,在一篇文章裡會有非常多的屬性比如:

  • post title
  • archive author
  • archive year
  • archive month
  • archive date
  • permalink
  • categories
  • tags .. 等等
<?php
    the_date();
    the_author();
    the_title();
    the_content();
?>
我們不需要顯示所有的東西,因為這樣會顯得版面很雜亂,我們可以先選幾個屬性,再用CSS 改好它們的版面設計,這樣我們就可以得到一個簡潔明了的文章內容版面了。

在這裡我先提一下在WordPress 的文章頁面,有一個屬性欄叫 「類別」(categories),作用就是標注每個文章的類別,我們先在這裡使用它提供的連結新建一個新類別,名字叫作「技術分享」 Slug欄就寫 "technology"。然後回到 "technologyshare.php "裡加上以下代碼:
$all_posts = new WP_Queryarray( 
                              'post_type' => 'post',
                              'category_name'=>'technology',
                              'post_status' => 'publish', 
                              'posts_per_page'=>-1 )
                              );

這是一段WordPress 的search query,目的是搜尋所有已經發佈並且標籤了名字叫作「技術分享」 Slug 叫 “technology” 的所有文章。設定完後,我們所有標籤了「技術分享」的文章都會自動透過”technologyshare.php “的版面作為Landing page 顯示,文章內容屬性就會透過”content-tmpl_archives.php” 篩選顯示,達到我們想要的版面設計了。

WordPress 自訂佈景主題 (Custom Themes) 第二節

在上一章節中我們學會了如何建立屬於自己的佈景主題 (Themes),接下來我們就應該去佈置我們的網頁版面,設計及豐富我們頁面內容了。可是在我們實行行動前,有一件事我要先告訴大家,希望大家先去認識清楚 WordPress Themes的一大特色 – 「響應式網頁設計」 (Responsive web design)。如果在沒有認清楚什麼是「響應式網頁設計」的前題下,先去做了網頁版面設計,那麼就很可能因為不附和WordPress的一些要求,最後只好推倒重來,不但浪費了時間,更令你的心血白費了。所以先認識「響應式網頁設計」是非常重要的一件事。

「響應式網頁設計」的起源,是因為現今社會上每人手上都可能有一台智能裝置,例如 smartphone, Tablets 等等。它們已經成為最主流的上網工具,但同時它們的設計又五花百門,螢幕大小都有不小的差別。傳統的網站設計已經不能滿足所有裝置的要求,為了附合主流要求,「響應式網頁設計」就順其自然的出現,滿足了一個網頁設計可以在大部份主流裝置 如電腦﹑智能電話上運行。

我們先看看WordPress 的 Themes 在一台電腦上是如何顯示版面內容:

Theme 的結構介紹

在上圖我們可以了解到,Themes 要在每一個 Page (頁面) 內顯示內容,比如一段文字及圖片等。如圖這些段落的文字或圖片都可以放在一個個Blog 內,這些版面的設計我們都可以用CSS 的 DIV 去分開切割,設定它們的大小﹑形狀﹑顏色以及擺放位置。我們可以想像成它們就是一塊塊的積木,而我們可以按我們想要的畫面把它們組合起來。

CSS的靜態及動態比較

如果在一台電腦上顯示一個版面,我們可以加上一些靜態的CSS屬性數值,如圖上 Page 的寛(width)值就被定為 1440px ,意思就是在螢幕上你只可以看到這個數值大小的畫面,它不會隨著螢幕大小而改變。除了一些靜態的 CSS 屬性數值,我們也可以使用一些 CSS 動態的屬性數值,比如圖片中Blog 的大小和排位就是使用這樣的設計,這樣我們的版面就可以隨著螢幕的大小變化。而我亦建議大家多採用動態的屬性數值來設計,因為這是動態網頁設計的基本,也是很重要的一環。再接下來我們就來談談 「響應式網頁設計」的一些基於知識。 在 WordPress 的 Themes 設計中我們必定會使用的的原素有:

Body {
    Wrapper {
       Header{ .. }
           Main Content {
                         Menu 
                         Sidebar
                        }
      Footer { .. }
    Wrapper }
Body 

在上圖我可以看到,我們在一個Page 內會使用到的原素以及他們的排版方法,其中我們可以看到一個比較特別的名字 Wrapper。它是用來控制我們在這一個Page內可使用的版面大小。如果我們將它的 CSS 寫成 #warpper { width: 900px; } 那麼 ID 叫 warpper 的 DIV 將會限制在900px; 而我們如果用在「響應式網頁設計」上會像以下這樣寫法:

#warpper { 
max-width: 900px;
width: 100%; }
這樣寫我們就可以得到一個隨螢幕大小變化,而最大可為900px 的DIV 。知道了這個方法後,我們在以後的 DIV CSS 寫法都可以按這方式來做。那麼我們就可以得到一個全自由變化的版面設計。

再下一步,也是很重要的一步,就是用CSS 來告訢我們的電腦什麼時候在電腦畫面跟移動裝置畫面間轉換。我們可以用到這句 CSS 來實行 :

@media only screen and (max-width: 500px) { }

以上這一句的意思就是當螢幕寛度 最大不大於500px 時就執行以下 CSS。 例如:
我們有一個 DIV 它的CSS 屬性是 #contentbox { width:900px; }。而當我們想要令它自動於行動裝置中轉換寛度,就可以這樣 :

#contentbox { width:900px; }
@media only screen and (max-width: 500px) {
#contentbox { width:100%; }
 }
行動裝置上的CSS 寛值設定 Responsive Web Design
用以上的CSS 就可以在螢幕寛度不大於500px時,寛值由900px轉換成100%,原因是在行動裝置比如智能電話上,螢幕都會比較小,我們都要盡量的用盡100%的寛度,以確保我們的文字及圖片不會太壓縮。所以在小型裝置上我們都會以一個區塊一個頁面的方式來顯示,把Page 的 Blog 分拆成一個個的區塊。 

而要更好地顯示我們的畫面,在我們的Header上的<head> </head>加上一句"viewport"的指令 :
<meta name="viewport" content="width=device-width, initial-scale=1" />

這是告訴我們的瀏覽器要用合適的比例來顯示我們的畫面。
最後加上一句img 的css 指令我們的圖片也可以跟隨螢幕大小而改變大小:

img {
    height: auto;
    max-width: 100%;
}
就是這樣,我們就可以得到一個在電腦跟智能裝置上自由轉換的「響應式網頁設計」了。 你學會了嗎? 如果你有什麼不懂的地方可以在下面的留言詢問喔! 我看到會回復你的。祝你有美好的一天 :)
跟隨我們: