此为历史版本和 IPFS 入口查阅区，回到作品页
rucifa
IPFS 指纹 这是什么
作品指纹

[WordPress]搭配HTML、CSS對網站進行修改

rucifa
·
·

有相當時間沒有更新，主要也是因為沒東西寫=.=
而最近因為幫忙別人做網站，才稍微接觸到一些技術面的東西
不過也因為如此，才面臨到一些想要做微調的東西

例如：
我想要在網頁上增加一點效果，但是WordPress的Plugin（插件）卻沒有我想要的功能時
那就得要想辦法來靠HTML和CSS來修改了

首先我以目前作的網頁為例，如果是一般頁面下的話，頁首（Header）的部分看起來顯示上沒什麼問題

但如果進入文章後卻會發現…文章的頁首的字根本看不清楚

就…不知道為什麼在文章的部分會搞成這樣，想說這個就算找佈景主題的廠商也不見得搞的定（可能會拖很久）；加上自己也想了解如果說要去做一些修正的話，該怎麼處理（也算是為了學新東西啦）

首先我把希望的最終結果放上來

功能要求如下：

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z"></path></svg>僅在文章頁面時，電腦、平板的模式下將原本的選單（Header）的部分隱藏，但在手機模式下把原本選單再次出現（因為手機模式下會有漢堡符號選單，被隱藏的話手機模式下會完全沒選單的）
<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z"></path></svg>被隱藏的Header部分（選單）後需要增加90 px的高度（才不會看起來太過偏上方）
<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 512 512"><path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM406.6 278.6l-103.1 103.1c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25L306.8 288H128C110.3 288 96 273.7 96 256s14.31-32 32-32h178.8l-49.38-49.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l103.1 103.1C414.6 241.3 416 251.1 416 256C416 260.9 414.6 270.7 406.6 278.6z"></path></svg>被隱藏的選單由新製作的替代，然後新選單放置在畫面右側，游標靠近時就會捲動出來

於是乎就開始了如何去調整的漫長路程（花了差不多快3天搞定）

其實最重要的是要先了解HTML的架構（CSS太博大精深了…）
一個網頁簡單來講就是<head>和<body>所構成的（這是最省略的說法，實際上還有其他的設定在內），詳細可看最後的參考資料
這邊會簡單說HTML中<head>和<body>的用途

HTML架構大略說明

< head >的說明

<head>就如其名，是在整個HTML的開頭，裡面會記載有的沒的情報，如編碼為Unicode（UTF-8），一些引伸作業（如呼叫外部服務像是Google字型）這些之類，這些內容不會顯示在我們看到的內容裡，而是背地裡偷偷的動作

< body >的說明

<body>則是代表顯示你所看到東西的主體（包含文字、特效都在這裡面），所以要怎麼呈現一個頁面，最主要是在這裡進行

那麼接下來就是開始調整我們需要的功能

調整文章頁面出現側邊欄

這時候還是要把以前文章挖出來（插件通用）

[WordPress]如何在每篇文章尾部加入固定內容
可以借用這篇文章提到的Head, Footer and Post Injections插件

這裡我們先進入Head, Footer and Post Injections的設定頁

透過設定進入→選擇「Header and Footer」

在Header and Footer（頁首及頁尾）的分頁裡，<HEAD> PAGE SECTION INJECTION（ 插入<HEAD> 及 </HEAD> 標籤之間）的在全部頁面生效區填入以下的程式碼，下面的程式碼為我要呼叫讀取Google的Unbounded字型

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Unbounded&display=swap" rel="stylesheet">

然後在Posts（文章）分頁一樣輸入程式碼（href後面的網址是我選單要做的連接網址，這個請依實際狀況作修正）

<div class="side_menu">
	<div class="title">MENU</div>
	<ul class="nav">
		<li><a href="https://www.spinlux.com">Home</a></li>
		<li><a href="https://www.spinlux.com/about">About</a></li>
		<li><a href="https://www.spinlux.com/products">Products</a></li>
		<li><a href="https://www.spinlux.com/applications">Applications</a></li>
		<li><a href="https://www.spinlux.com/resources">Resources</a></li>
		<li><a href="https://www.spinlux.com/contact">Contact</a></li>
	</ul>
</div>

最後則是把CSS加到頁面裡

可以在選單裡面的「外觀」→「自訂」→「附加的CSS」加入以下的程式碼

/* 在大於768 像素的裝置上（電腦、平版）將會把單篇文章的id為masthed（Header）內容屏蔽掉*/
@media screen and (min-width: 768px) {
    .single #masthead {
        display: none;
    }
}

/* 在小於等於 767 像素的裝置上（手機）隱藏 class 為 side_menu 的側邊欄 */
@media screen and (max-width: 767px) {  
  .side_menu {
    display: none;
  }
}
/* 當游標停留在側邊欄的文字上，會在文字前方多出綠色方塊 */
.side_menu .nav li a:hover::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: green;
  margin-right: 5px;
}
.side_menu {
  border-radius: 10px;
	font-size: 16px;
	font-weight: 400;
  background: #f7b51b;
	/* 側邊欄寬度 */
  width: 245px;
	/* 側邊欄高度 */
  height: 55%;
  padding-left: 50px;
  position: fixed;
  z-index: 100;
  -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
          box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.2);
  /* 滑動出來的選單位移程度 */
	right: -155px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  color: #222;
	/* 僅在此選單中使用 Google的Unbounded 字體，若在其他地方使用的話會變成全域性使用此字體 */
	font-family: "Unbounded", sans-serif; }

.side_menu:hover,
.side_menu:focus {
  transform: translate3d(-150px, 0, 0);
    -webkit-transform: translate3d(-150px, 0, 0);
    -ms-transform: translate3d(-150px, 0, 0);
    animation-timing-function: 1s ease-in;
}
.side_menu .title {
    top: 50%;
    position: absolute;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    transform: rotate(270deg);
    left: 10px;
    font-weight: 800;
    font-size: 20px;
	/* 添加分隔線 */
    border-bottom: 1px solid #222; 
	
}
.side_menu .nav {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-weight: 100;
}
.side_menu .nav li {
      padding-bottom: 30px;
      list-style-type: none;
}
.side_menu .nav li a {
        display: block;
        text-decoration: none;
        color: inherit;
        transition: all 0.3s;
        -webkit-transition: all 0.3s;
}

/* 游標懸浮時的字體顏色 */
.side_menu .nav li a:hover {
          color: #ff0000;
}

上述步驟完成後，就會看到在單篇文章中出現該側邊工具欄（但是文章上方太壓迫這部分還要做調整）

於是再度回到Head, Footer and Post Injections的設定頁

在 After the <BODY> tag（<BODY> 標籤後方）的的欄位裡補完php程式碼

<?php if ( is_single() ) : ?>
  <style>
    @media screen and (min-width: 768px) {
      .single-post-space {
        height: 90px;
      }
    }
  </style>
  <div class="single-post-space"></div>
<?php endif; ?>

這段程式碼會判斷僅在「單篇文章」的上方增加90 px的高度（空白）

最終輸出結果如下

以上就算一個段落，該說現在的AI還真是厲害；我是先參考了效果之後，把原碼丟給Bing AI，再去一步步修改（中間也不少卡在Head, Footer and Post Injections的使用方式，我使用的功能應該算是很基礎的部分吧）

以上為[WordPress]對網站進行修改（搭配HTML、CSS）的內容，希望這能夠幫助你

參考資料

Top 13 Wonderful Slide Menus [CSS & JavaScript Examples]

HTML 語法教學，HTML 入門新手必學 – ALPHA C

Day 2 HTML的基本認識 – iT邦幫忙

Bing AI（幫忙最多）

CC BY-NC-ND 2.0 授权