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

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

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

第二種方法: 就是透過安裝 “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上制作個人風格特色的網站。 如果你喜歡跟別人不一樣，希望擁有獨屬於自己網站的佈景主題 Themes，那麼希望這編文章可以給你一點點得幫助 ：）接下來讓我們正式開始吧！！

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

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

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

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

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

–

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

–

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

.

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

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

.

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

大家好! 有一段時間沒有來更新電腦技術分享的文章了，今天我們就來說說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(); 就可以把縮圖叫出來，在我們佈置版面時非常方便。致於其他的其能，大家如果有興趣也可以在網上找找看。

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

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

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

不過單單是限制和封鎖，我覺得還是不夠的，我們得從源頭出發找出解決問題的方法。我們回到第一張圖查看，可以發現攻擊者都是透過 “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

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

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

add_filter('xmlrpc_enabled', '__return_false');

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

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

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

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

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

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 網站主題開發文章，我們今天來談一下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 在一台電腦上是如何顯示版面內容:

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

如果在一台電腦上顯示一個版面，我們可以加上一些靜態的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 就可以在螢幕寛度不大於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%;
}

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