萊神獸個人博客之前上線裝了一個WordPress緩存插件WP Super Cache，這個WordPress插件安裝是有一些條件的；茹萊神獸沒有注意這些，直接按照常規(guī)插件的方法裝的，結(jié)果插件出現(xiàn)了后臺不兼容問題，不過還是能勉強用，不過每次打開這個插件頁面，頂部總會出現(xiàn)哪些不好看的問題，茹萊神獸調(diào)試無果就放著沒管，能用就行了。

前段時間，茹萊神獸實在無法忍受這個插件給后臺帶來的不兼容性錯誤，于是找來了關于WordPress緩存插件WP Super Cache的安裝卸載方法，然后一步步的跟著步驟刪除。

通過FTP清理了WordPress緩存插件WP Super Cache之后，登錄后臺也沒有出現(xiàn)其他的問題，然后看見WordPress程序又有更新了，茹萊神獸突然發(fā)現(xiàn)WordPress程序已經(jīng)升級到了5.0以上了，于是就打算給博客來個手工升級。

進入WordPress中文網(wǎng)，下載WordPress程序最新版本安裝包，解壓安裝包，刪除wp-content文件夾，然后利用FTP上傳覆蓋原來的文件。

覆蓋完畢后打開瀏覽器輸入http://域名/wp-admin/upgrade.php，可能會提示需要升級wordpress數(shù)據(jù)庫，茹萊神獸按照提示升級了Wordpress數(shù)據(jù)庫。

然后訪問博客首頁，結(jié)果就出現(xiàn)了首頁板塊錯亂的問題，茹萊神獸本想登錄WordPress后臺進行查看一下，結(jié)果后臺也無法登陸了，整個頁面直接提示出現(xiàn)鏈接多次重置性問題，茹萊神獸意識到博客升級之后，出現(xiàn)問題了。

茹萊神獸博客自從升級出問題之后，扔在哪里兩天沒有處理，后面到周末的時候，在家里準備自己研究一下；后臺登錄不上，茹萊神獸以為是升級的時候沒有刪除wp-admin文件夾的問題，經(jīng)過測試，結(jié)果不是這個問題。

茹萊神獸也試圖通過WordPress中文網(wǎng)下載原有的版本，以此來恢復WordPress博客的后臺登錄問題，但是經(jīng)過測試也行不通。

茹萊神獸博客出問題之后，茹萊神獸做了一下嘗試來試圖恢復博客：

1、通過網(wǎng)上查找資料來試圖解決當前的疑問，找了關于WordPress方面大量的文章解惑，結(jié)果沒有一篇是茹萊神獸想要的，后面才知道是沒有抓住問題的重點導致的。

2、求助了WordPress博客交流群，以前的同事以及現(xiàn)在的同事，問題是找到了，但是因為比較忙，所以暫時只能茹萊神獸自己操作。

3、茹萊神獸的域名和虛擬主機都是來自西部數(shù)碼的，于是茹萊神獸也向西數(shù)的工作人員提交了有問必答，問題是發(fā)現(xiàn)了，給的回答是，因為程序非本公司開發(fā)，所以不敢貿(mào)然修改。

通過這些嘗試與診斷，發(fā)現(xiàn)茹萊神獸博客的首頁有大量的報錯問題，之前的茹萊神獸也給WordPress博客申請了SSL證書，首頁報錯發(fā)現(xiàn)了大量未含有HTTPS開頭的鏈接地址，這顯然是不符合常理的。

很多圖片的鏈接地址都是http開頭的，茹萊神獸博客申請SSL證書之后，全站都開啟了HTTPS協(xié)議，首頁不兼容，圖片不顯示，西數(shù)那邊和同事的反應都是跟這個有關。必須要把http://完全修改為https://才行，可是茹萊神獸卻無從下手。

晚上下班回家，茹萊神獸坐在電腦旁，再一次通過百度搜索關于WordPress升級之后，后臺連接多次重置無法登陸等問題，翻來覆去的找。

最終一篇關于https協(xié)議WordPress升級之后，后臺無法登陸的解決方法，大意和這個類似的文章標題，這是一個獨立博客，茹萊神獸看了這篇文章，發(fā)現(xiàn)了一些蛛絲馬跡。

整篇文章指出，通過https協(xié)議改造過的WordPress博客，升級之后若是出現(xiàn)不兼容性問題，后臺重置而無法登陸，應該是根目錄web.config.php文件里面缺少關于HTTPS方面的配置，然后列出了三行關于https的配置代碼。

茹萊神獸當時在猶豫，后面又想，反正博客已經(jīng)這樣了，不可能會再壞的；于是就把這三行代碼添加到了web.config.php文件里面，然后刷新首頁。

茹萊神獸博客直接回復正常，真是踏破鐵鞋無覓處得來全不費工夫，至于那三行代碼，茹萊神獸暫時忘記了，還沒有記錄呢，不過已經(jīng)收藏了。

作者：茹萊神獸

來源：https://www.badpon.com/710.html

wordpress主題的動態(tài)模板中，搜索頁模板并不是必須的。但是，為了對用戶更加的友好，可以讓用戶在wordpress網(wǎng)站上能夠通過搜索來查找自己的想要的文章內(nèi)容，我們還是有必要給trans主題添加一個搜索頁模板。一般情況下，wordpress主題動態(tài)模板的搜索頁的整體布局和文章列表頁模板是差不多的，所以，我們可以參照文章列表頁來做。

第一步：創(chuàng)建一個search.php文件。

在wordpress主題trans目錄下創(chuàng)建一個search.php文件，這是wordpress程序要求的默認搜索頁模板的文件，名字必須是search。然后，把trans靜態(tài)模板search.html文件中的代碼全部復制到search.php文件中。

第二步：修改頭部的代碼。

在search.php文件中，刪除從< !doctype>到< /header>標簽之間的所有代碼。然后，在同樣的位置，通過wordpress函數(shù)來引入公共的頭部模板文件：

< ?php get_header(); //引入頭部模板 ?>

修改頭部模板header.php文件中的搜索表單的代碼，代碼如下：

< form action="< ?php bloginfo("siteurl"); ?>" method="get">

< input type="search" name="s" placeholder="搜索...">

< input type="submit" value="搜索">

</form>

注：第一個input輸入框的name值必須是 s （如上圖），這也是wordpress的硬性要求。否則，就搜索不到任何內(nèi)容。

第三步：修改search.php的側(cè)邊欄代碼。

在search.php文件中，刪除< div class="c_right">標簽所包含的所有側(cè)邊欄代碼，然后，在這個位置上，引入sidebar.php側(cè)邊欄公共模板：

< ?php get_sidebar(); //引入側(cè)邊欄模板 ?>

第四步：修改搜索頁模板的底部代碼。

在搜索頁模板中，刪除從< footer>標簽到模板代碼結(jié)束的所有底部代碼，然后，在當前的位置上，添加如下代碼引入底部公共模板：

< ?php get_footer(); //引入底部模板 ?>

第五步：修改search.php的左側(cè)主體部分的面包屑導航。

因為是搜索頁面模板，所以，這個面包屑導航，我們要體現(xiàn)出搜索結(jié)果。所以，我們刪除search.php模板中< div class="left_top">標簽內(nèi)部的所有代碼，替換成如下的代碼：

< ul>< li>< span class="dashicons-before dashicons-admin-generic"></span>搜索</li>< li>< a href="<?php bloginfo("siteurl"); ?>">< span class="dashicons-before dashicons-admin-home"></span>首頁</a> > 搜索結(jié)果</li></ul>< ul> 關鍵詞“< ?php the_search_query(); ?>”共有 < ?php global $wp_query; echo $wp_query->found_posts; ?> 個搜索結(jié)果</ul>

上面代碼解說：

the_search_query()：輸出要搜索的關鍵詞；$wp_query：是wordpress提供的一個全局變量，它包含當前頁面的所有查詢數(shù)據(jù)；$wp_query->found_posts：搜索當前關鍵詞的數(shù)量

搜索頁面包屑導航效果如下圖：

第六步：修改搜索頁模板左側(cè)的文章列表。

刪除search.php搜索頁模板中< div class="left_bottom">標簽內(nèi)部的所有代碼，然后，替換成如下代碼：

< ?php if ( have_posts() ): while ( have_posts() ) : the_post();?>< div class="list">< ul class="list_h">< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></ul>< ul class="list_con">< ul class="list_con_left">< a href="< ?php the_permalink(); ?>"> < ?php if(has_post_thumbnail()) { //如果有特色圖片，就調(diào)用特色圖片the_post_thumbnail( 'thumbnail' ,array( 'alt'=> trim(strip_tags( $post->post_title )), 'title'=> trim(strip_tags( $post->post_title )))); }else { //否則調(diào)用文章第一張圖片echo '<img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?></a></ul>< ul class="list_con_right">< li>< ?php echo mb_substr(strip_tags($post->post_content),0,120,'utf-8'); ?> ... </li>< li>< span class="dashicons-before dashicons-admin-users">< ?php the_author(); ?> </span>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> </span>< span class="dashicons-before dashicons-visibility">< ?php echo get_post_meta($post->ID, 'views', true); ?> </span></li></ul></ul></div>

< ?php endwhile;endif;?>

這段代碼，我們在archive.php文章列表頁模板中我們已經(jīng)介紹過了，就不多說了。

第七步：添加分頁代碼。

在trans靜態(tài)模板的代碼中，我們沒有分布代碼，這里，我們添加上搜索結(jié)果的分頁效果代碼：

< div class="left_page">< ?phpthe_posts_pagination( array('mid_size'=> 3, //當前頁碼數(shù)的 兩邊 顯示幾個頁碼。'prev_text'=>'<', //上一頁'next_text'=>'>', //下一南) );?></div>

這里，我們使用到了wordpress提供的分頁函數(shù)the_posts_pagination()來實現(xiàn)搜索頁的文章列表的分頁效果。這個函數(shù)我們在修改首頁模板時，我們就介紹過了，如果想了解它，可以回到我們創(chuàng)建首頁模板index.php的文章去看看。

?好了，通過以上幾步，我們就完成了wordpress主題動態(tài)模板trans的搜索頁面模板的創(chuàng)建和修改。此時，我們在頭部搜索框中輸入關鍵詞進行搜索后，搜索結(jié)果如上圖所示。從這幾節(jié)課，我們可以看出，有了公共模板后，我們創(chuàng)建其它動態(tài)模板時，就方便多了，只要按照本節(jié)的幾個步驟，就可以很輕松地創(chuàng)建出wordpress主題的動態(tài)模板文件。如果喜歡我的文章，別忘了幫我“點贊、評論和關注我”哦。

HP比較麻煩的地方就是大部分項目都需要運行php-fpm和nginx，比如WordPress也是運行在php-fpm環(huán)境下的，所以一般都需要安裝php-fpm，nginx和mysql。

幸好現(xiàn)在容器技術(shù)可以方便的搭建環(huán)境，現(xiàn)在我記錄下我用Podman搭建WordPress開發(fā)環(huán)境。

Windows 10 系統(tǒng)，安裝好Podman，我的Podman版本信息如下

PS D:\wordpress> podman version
Client:       Podman Engine                           
Version:      4.5.1                                   
API Version:  4.5.1                                   
Go Version:   go1.20.4                                
Git Commit:   9eef30051c83f62816a1772a743e5f1271b196d7
Built:        Sat May 27 01:07:48 2023                
OS/Arch:      windows/amd64                           
                                                      
Server:       Podman Engine                           
Version:      4.5.0                                   
API Version:  4.5.0                                   
Go Version:   go1.19.7                                
Built:        Fri Apr 14 23:42:56 2023                
OS/Arch:      linux/amd64            

以下是搭建開發(fā)環(huán)境的過程，我選擇了php8.2， WordPress6.3

Wordpress6.3項目檢出

下載WordPress代碼到本地

不過我建議直接使用git clone，Github比較慢，我同步了一份到Gitee

git@gitee.com:uully/wordpress.git

開發(fā)的時候從tag 6.3 創(chuàng)建一個新的分支進行開發(fā)

創(chuàng)建自定義的docker-compose

項目更目錄下新建docker-compose.yml，示例如下，添加需要的service，這里用到mysql，php-fpm和nginx

version: '3'

services:
  db:
    image: mysql:5.6
    command: "--default-authentication-plugin=mysql_native_password"
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: wordpress
      MYSQL_DATABASE: wordpress
    volumes:
      - ./mysql_data:/var/lib/mysql
    ports:
      - "3306:3306"
    networks:
        - wp_network
  nginx:
    image: nginx:1.25
    volumes:
      - .:/var/www/html
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./log/nginx:/var/log/nginx
    ports:
      - "80:80"
    networks:
      - wp_network
    depends_on:
      - php-fpm
  php-fpm:
    build:
      context: ./php-fpm
    volumes:
      - .:/var/www/html
    networks:
        - wp_network
    depends_on:
      - db
networks:
  wp_network: {}

具體配置可以參考我提交的alien分支的文件。

運行開發(fā)環(huán)境

在項目根目錄運行

podman-compose up -d

是不是非常的簡單，訪問localhost就可以運行你本地的WordPress了，最后祝大家開心的使用WordPress進行項目開發(fā)。