rucifa
rucifa

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

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

例如:
我想要在網頁上增加一點效果,但是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>則是代表顯示你所看到東西的主體(包含文字、特效都在這裡面),所以要怎麼呈現一個頁面,最主要是在這裡進行

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

調整文章頁面出現側邊欄

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

可以借用這篇文章提到的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)的內容,希望這能夠幫助你

參考資料

Bing AI(幫忙最多)

CC BY-NC-ND 2.0 版权声明

喜欢我的文章吗?
别忘了给点支持与赞赏,让我知道创作的路上有你陪伴。

加载中…

发布评论