WordPress Post/Page 全寬 Canvas 模板

  Paki Canvas v3 是一個 WordPress 單檔 PHP 範本，提供類似 Elementor Canvas 的「乾淨版面」：不載入主題原生 header/footer/sidebar，自行輸出完整 HTML 結構並保留 wp_head() / wp_footer() / wp_body_open()，確保外掛與區塊樣式能正常工作。模板採深色科技風設計，內建固定綠色 sticky 頁首、文章卡片容器、圖片與表格的暗色樣式，並特別處理 pre/code 相關 CSS，避免洗掉語法高亮顏色。

簡介用法（How to use）

  1. 放置檔案
    將 paki-canvas-v3.php 上傳至「目前啟用主題或子主題」的根目錄：
    /wp-content/themes/你的主題/ paki-canvas-v3.php

  2. 套用到文章/頁面
    在後台編輯「文章（Post）」或「頁面（Page）」：
    右側設定 → 範本（Template） → 選 Paki Canvas v3 → 更新/發佈。

  3. 設為預設（可選）
    若你已加入「自動套用」程式碼，新建立的文章/頁面會自動使用此模板；既有內容可批次轉換（建議先備份與清快取）。

  4. 內容編寫建議

  • 程式碼請使用 Gutenberg 的「程式碼區塊 / 預格式化區塊」或語法高亮外掛，模板已避免覆蓋其上色。
  • 表格若使用自訂 HTML，建議不要在內容內嵌 <style>，改由模板 CSS 統一管理，避免 hover/斑馬紋被外部樣式干擾。

 

				
					<?php
/*
Template Name: Paki Canvas v3
Template Post Type: post, page
*/
?><!doctype html>
<html <?php language_attributes(); ?>>
<head>
  <meta charset="<?php bloginfo('charset'); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <?php wp_head(); ?>

  <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=Poppins:wght@500;600;700&family=Permanent+Marker&display=swap" rel="stylesheet">

  <style>
    :root{
      --bg: #070b16;
      --stroke: rgba(255,255,255,.14);
      --text: rgba(255,255,255,.92);
      --brand: #20c997;
      --cyan:  #2dd4ff;
      --shadow: 0 18px 60px rgba(0,0,0,.45);
    }

    html, body{ margin:0; padding:0; }
    body.paki-canvas{
      min-height:100vh;
      background: var(--bg);
      color: var(--text);
      font-family:'Poppins','Microsoft JhengHei',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }

    .paki-canvas-wrap{
      width:100vw;
      max-width:100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
    }

    .paki-canvas-content{
      padding: 26px clamp(16px, 5vw, 88px) 88px;
    }

    /* 解除 Gutenberg constrained 寬度 */
    body.paki-canvas .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
      max-width:none !important;
    }
    body.paki-canvas :where(.wp-block-post-content, .entry-content){
      max-width:none !important;
    }

    /* 強制文章區文字顏色（避免 Gutenberg/主題 inline 色蓋掉）
       注意：刻意不包含 pre/code，避免洗掉語法高亮 */
    body.paki-canvas .paki-article,
    body.paki-canvas .paki-article :where(p, li, span, strong, em, a, blockquote, figcaption, td, th, caption){
      color: var(--text) !important;
    }
    body.paki-canvas .paki-article :where(p, li){
      color: rgba(255,255,255,.82) !important;
    }
    body.paki-canvas .paki-article :where(h1,h2,h3,h4,h5){
      color: rgba(255,255,255,.95) !important;
    }

    /* 文章卡片 */
    .paki-article{
      margin-top: 18px;
      background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
      border: 1px solid var(--stroke);
      border-radius: 18px;
      box-shadow: var(--shadow);
      padding: clamp(18px, 2.6vw, 34px);
      backdrop-filter: blur(10px);
    }

    /* 文章標題 */
    .paki-post-title{
      font-size: clamp(28px, 4.2vw, 52px);
      line-height: 1.06;
      margin: 0 0 18px;
      letter-spacing: .3px;
    }
    .paki-post-title::after{
      content:"";
      display:block;
      height: 3px;
      width: min(240px, 60%);
      margin-top: 14px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brand), var(--cyan));
      box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 18px 40px rgba(32,201,151,.22);
    }

    /* H2 裝飾 */
    .paki-article :where(h2){
      margin-top: 34px;
      margin-bottom: 14px;
      padding-left: 14px;
      position: relative;
      font-size: clamp(20px, 2.4vw, 28px);
    }
    .paki-article :where(h2)::before{
      content:"";
      position:absolute;
      left:0;
      top:.20em;
      width:4px;
      height: 1.1em;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--brand), var(--cyan));
      box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 14px 30px rgba(45,212,255,.12);
    }

    /* 連結 */
    body.paki-canvas .paki-article :where(a){
      color: #bff7e6 !important;
      text-decoration: none;
      border-bottom: 1px solid rgba(191,247,230,.35);
    }
    body.paki-canvas .paki-article :where(a:hover){
      color: #d7fbff !important;
      border-bottom-color: rgba(45,212,255,.65);
    }

    /* 引用 */
    .paki-article :where(blockquote){
      margin: 18px 0;
      padding: 14px 16px;
      border-left: 4px solid rgba(45,212,255,.6);
      background: rgba(0,0,0,.24);
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.10);
    }

    /* 行內 code（只管行內，不洗掉 pre 的語法高亮） */
    .paki-article :where(p code, li code, td code, th code){
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      padding: .15em .35em;
      border-radius: 10px;
    }

    /* Code block / pre：讓語法高亮正常顯示 */
    body.paki-canvas .paki-article :where(pre, .wp-block-code pre){
      background: rgba(0,0,0,.42) !important;
      border: 1px solid rgba(255,255,255,.12) !important;
      border-radius: 14px;
      padding: 16px;
      overflow:auto;
    }
    /* 不要把 pre/code 內部顏色強制成同一色，否則語法高亮會失效 */
    body.paki-canvas .paki-article pre,
    body.paki-canvas .paki-article pre * ,
    body.paki-canvas .paki-article code,
    body.paki-canvas .paki-article code *{
      color: inherit !important;
    }

    /* 圖片（Gutenberg + 一般 img） */
    .paki-article :where(.wp-block-image, figure){
      margin: 18px 0;
    }
    .paki-article :where(.wp-block-image figure){
      margin: 0;
    }
    .paki-article :where(.wp-block-image img, figure img, img){
      max-width: 100%;
      height: auto;
      display: block;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 18px 50px rgba(0,0,0,.30);
      background: rgba(0,0,0,.18);
    }
    .paki-article :where(.wp-element-caption, figcaption){
      margin-top: 10px;
      font-size: 13px;
      color: rgba(255,255,255,.70) !important;
    }

    /* Gutenberg 表格（一般情況） */
    .paki-article :where(.wp-block-table){
      margin: 18px 0;
      overflow: auto;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(0,0,0,.18);
    }
    .paki-article :where(.wp-block-table table){
      width:100%;
      border-collapse: collapse;
      min-width: 560px;
    }

    /* ===== Custom HTML: exam-code-table（修復 hover/斑馬紋變白）===== */
    body.paki-canvas .paki-article .exam-code-table{
      font-family: system-ui, -apple-system, "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
      margin: 24px 0;
      isolation: isolate;
    }

    body.paki-canvas .paki-article .exam-code-table .table-wrap{
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(0,0,0,.18);
      box-shadow: 0 18px 50px rgba(0,0,0,.28);
    }

    body.paki-canvas .paki-article .exam-code-table table{
      border-collapse: collapse;
      width: 100%;
      max-width: 1100px;
      min-width: 720px;
    }

    body.paki-canvas .paki-article .exam-code-table caption{
      text-align: left;
      font-weight: 700;
      margin: 12px 12px 10px;
      color: rgba(255,255,255,.90) !important;
    }

    body.paki-canvas .paki-article .exam-code-table table thead tr{
      background: rgba(255,255,255,.06) !important;
    }
    body.paki-canvas .paki-article .exam-code-table table tbody tr{
      background: rgba(10, 14, 26, .72) !important;
    }
    body.paki-canvas .paki-article .exam-code-table table tbody tr:hover{
      background: rgba(10, 14, 26, .72) !important; /* 你要不變色：鎖死 */
    }

    body.paki-canvas .paki-article .exam-code-table :where(th, td){
      border: 1px solid rgba(255,255,255,.14) !important;
      padding: 10px 12px;
      vertical-align: top;
      background: rgba(10, 14, 26, .72) !important;
      color: rgba(255,255,255,.90) !important;
    }

    body.paki-canvas .paki-article .exam-code-table thead :where(th){
      background: rgba(255,255,255,.06) !important;
      font-weight: 700;
    }

    body.paki-canvas .paki-article .exam-code-table .col-p{
      width: 120px;
      white-space: nowrap;
    }

    body.paki-canvas .paki-article .exam-code-table .pair{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      padding: 2px 0;
    }

    body.paki-canvas .paki-article .exam-code-table .code{
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      color: var(--cyan) !important;
      white-space: nowrap;
    }

    body.paki-canvas .paki-article .exam-code-table :where(td:hover, th:hover){
      background: rgba(10, 14, 26, .72) !important; /* 不變色 */
      color: rgba(255,255,255,.90) !important;
    }

    /* 避免 sidebar/wigets */
    body.paki-canvas :where(.sidebar, aside, .widget-area, #secondary){ display:none !important; }
  </style>
</head>

<body <?php body_class('paki-canvas'); ?>>
<?php wp_body_open(); ?>

<!-- Header（固定綠色 + 無滾動） -->
<div id="paki-header" class="paki-canvas-wrap">
  <style>
    #paki-header, #paki-header *{ box-sizing:border-box; }

    #paki-header header.site-header{
      position: sticky;
      top: 0;
      z-index: 1000;

      width:100vw;
      max-width:100vw;
      margin-left: calc(50% - 50vw);

      background: linear-gradient(180deg, rgba(32,201,151,.94), rgba(32,201,151,.78));
      border-bottom: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 18px 55px rgba(0,0,0,.22);
      backdrop-filter: blur(10px);

      padding: 20px clamp(16px, 5vw, 88px);
      display:flex;
      flex-direction: column;
      gap: 12px;

      color:#fff;
      font-family:'Poppins','Microsoft JhengHei',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    }

    #paki-header .top-row{
      display:flex;
      align-items:center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    #paki-header .social{ display:flex; gap:12px; }
    #paki-header .social a{
      width: 34px; height: 34px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 12px;
      text-decoration:none;
      color: rgba(255,255,255,.95);
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.16);
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }
    #paki-header .social a:hover{
      transform: translateY(-2px);
      background: rgba(255,255,255,.18);
      border-color: rgba(255,255,255,.26);
    }
    #paki-header .social svg{ height:18px; fill: currentColor; }

    #paki-header .logo{
      font-family:'Permanent Marker', cursive;
      font-size: clamp(2rem, 4vw, 2.6rem);
      line-height:1;
      color:#fff;
      text-decoration:none;
      letter-spacing:.4px;
      text-shadow: 0 18px 50px rgba(0,0,0,.22);
    }

    #paki-header nav{
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      align-items:center;
    }

    #paki-header nav a{
      text-decoration:none;
      color: rgba(255,255,255,.92);
      font-weight:600;
      font-size: 14px;
      letter-spacing:.3px;

      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(0,0,0,.10);
      border: 1px solid rgba(255,255,255,.16);

      transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    #paki-header nav a:hover{
      transform: translateY(-1px);
      background: rgba(0,0,0,.14);
      border-color: rgba(255,255,255,.28);
      box-shadow: 0 12px 24px rgba(0,0,0,.18);
    }
    #paki-header nav a.is-active{
      background: rgba(255,255,255,.16);
      border-color: rgba(255,255,255,.34);
    }
  </style>

  <header class="site-header" role="banner">
    <div class="top-row">
      <div class="social" aria-label="Social links">
        <a href="https://www.youtube.com/@hksac91" aria-label="YouTube" rel="noopener noreferrer" target="_blank">
          <svg viewBox="0 0 24 24"><path d="M23.5 6.2a3 3 0 0 0-2.1-2.1C19.1 3.5 12 3.5 12 3.5s-7.1 0-9.4.6A3 3 0 0 0 .5 6.2 31 31 0 0 0 .5 12a31 31 0 0 0 .1 5.8 3 3 0 0 0 2.1 2.1c2.3.6 9.3.6 9.3.6s7.1 0 9.4-.6a3 3 0 0 0 2.1-2.1A31 31 0 0 0 23.5 12a31 31 0 0 0 0-5.8zM9.8 15.3V8.7l6 3.3-6 3.3z"/></svg>
        </a>
        <a href="https://www.instagram.com/pakkei920/" aria-label="Instagram" rel="noopener noreferrer" target="_blank">
          <svg viewBox="0 0 24 24"><path d="M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h10a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H7zm5 3.5a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11zm0 2a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7zm5.25-2.75a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>
        </a>
        <a href="mailto:admin@paki91.com" aria-label="Email">
          <svg viewBox="0 0 24 24"><path d="M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2zm0 2v.2l9 5.3 9-5.3V7H3zm0 3.4V19h18v-8.6l-8.6 5a1 1 0 0 1-1 0L3 10.4z"/></svg>
        </a>
        <a href="https://github.com/Pakkei0920/" aria-label="GitHub" rel="noopener noreferrer" target="_blank">
          <svg viewBox="0 0 24 24"><path d="M12 .5a11.5 11.5 0 0 0-3.6 22.4c.57.1.78-.25.78-.55v-2.1c-3.18.69-3.85-1.36-3.85-1.36-.52-1.32-1.27-1.67-1.27-1.67-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.02 1.75 2.67 1.24 3.32.95.1-.74.4-1.24.73-1.53-2.54-.29-5.22-1.27-5.22-5.68 0-1.25.45-2.27 1.19-3.07-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.17a11.02 11.02 0 0 1 5.8 0c2.21-1.48 3.18-1.17 3.18-1.17.63 1.59.23 2.76.11 3.05.74.8 1.19 1.82 1.19 3.07 0 4.43-2.69 5.38-5.25 5.66.41.35.77 1.04.77 2.1v3.12c0 .31.20.67.79.55A11.5 11.5 0 0 0 12 .5z"/></svg>
        </a>
      </div>

      <a class="logo" href="<?php echo esc_url(home_url('/')); ?>" aria-label="Go to HomePage">Paki91</a>
    </div>

    <nav aria-label="Primary" id="paki-nav">
      <a href="https://paki91.com">Home</a>
      <a href="https://paki91.com/about-me/">About Me</a>
      <a href="https://nas.paki91.com/">DSM</a>
      <a href="https://rcps.tickets.paki91.com/" target="_blank" rel="noopener noreferrer">QR</a>
    </nav>
  </header>

  <script>
    (function(){
      const nav = document.getElementById('paki-nav');
      if (!nav) return;
      const links = nav.querySelectorAll('a[href]');
      const current = location.href.replace(/\/$/, '');
      let matched = null;

      links.forEach(a => {
        const href = a.href.replace(/\/$/, '');
        if (href === current) matched = a;
      });
      if (!matched && links.length) matched = links[0];

      links.forEach(a => a.classList.remove('is-active'));
      if (matched) matched.classList.add('is-active');
    })();
  </script>
</div>

<div class="paki-canvas-wrap">
  <main class="paki-canvas-content" role="main">
    <article class="paki-article">
      <?php while ( have_posts() ) : the_post(); ?>
        <h1 class="paki-post-title"><?php the_title(); ?></h1>
        <?php the_content(); ?>
      <?php endwhile; ?>
    </article>
  </main>
</div>

<?php wp_footer(); ?>
</body>
</html>