戻る

WordPressカスタムhtml

2024/07/30



概要

既存のhtml/cssで構築したサイトをwordpressの新サイトに移行する目的は、html/cssのスキルが必要なくても運用できるというのが主だが、これまで定期的に更新してきた記事などを同じ形式で継続したい場合がある。毎年1回発行される同窓会会報のページなどがそれにあたる。

2023年秋に同窓会サイトをwordpressに切り替え2024年の会報の掲載はどの形態にするか思案していた。旧サイトの全部を新サイトのwordpressフォルダーと並列に移行してあるが、2024年の会報のページを継続して旧サイトに追加するか、新しくwordpressで作るか。

該当ページは年度ごとの目次に毎回同じ形式にして比較的複雑な table タグを使っているが、結構面倒。せっかくwordpressにしたのでtableのプラグインを使うことも考えたが、プラグインもまた使いづらく、細かな調整の利く「カスタムhtml」ブロックを使うことにした。

ここでの課題はcssをどう使うか。今回はlightning のカスタムCSSを使うことにした。

記事の原稿はpdfで提供されるのでpdfをどのようにコードで見せるかが最終課題となった。従来はpdfをそのままリンクしてブラウザで開いたが、ページ毎の固定ページを作ってプラグインPDF Embedderで 表示させることにした。手間がかかるが見栄えがよい。

以下、既存のhtmlを移行した例を記録しておく。



html移行

カスタムhtml

wordpressのカスタムhtmlで張り付けたコード

<table id="akiko_itable"> とtableタグのidを変える 


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title> KANASA vol32 index</title>
<style type="text/css">
<!--
#akiko_itable {width:100%;}
/*-------------- mobile responsive -----iphone6s --------------------*/
@media screen and  (max-width: 480px) {
      #akiko_itable {width:95%;}
  }
/* --------------------------------------------------------------------- */

-->
</style>
</head>
<body> 
<div id="div0">

<div style="clear:both;"></div>
<h2>会報KANASA Vol.32 目次</h2>
<table id="akiko_itable">
<tr />
<th id="th1">タイトル</th>
<th id="th2">寄稿者(卒年科)</th>
<th id="th3">所属など</th>
<th id="th4">頁<br>(リンク)</th>

<tr />
<td id="td1" colspan="3">KANASA Vol.32 表紙</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-表紙/" target="_blank" rel="noopener">表紙</a></td>

<tr />
<td id="td1" colspan="3">金砂健児の集い(総会・懇親会)案内 </td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-1ページ/" target="_blank" rel="noopener">1</a></td>

<tr />
<td id="td1" colspan="3">目次</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-2ページ/" target="_blank" rel="noopener">2</a></td>	

<tr />
<td id="td1" colspan="3">校歌</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-3ページ/" target="_blank" rel="noopener">3</a></td>	

<tr />
<td id="td1">会長挨拶</td>
<td id="td2">遠藤 久志 (昭和43年電気科卒)</td>　
<td id="td3">東京秋工会 会長</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-4ページ/" target="_blank" rel="noopener">4</a></td>	
		
<tr />
<td id="td1">秋田工業高校の近況</td>
<td id="td2">佐藤 貴文</td>
<td id="td3">秋田工業高校 校長</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-5ペーシ゛/" target="_blank" rel="noopener">5</a></td>	

<tr />
<td id="td1">新役員になって</td>
<td id="td2" colspan="2">高田 稔 (昭和48年土木科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-6ページ/" target="_blank" rel="noopener">6</a></td>	

<tr />
<td id="td1" colspan="3">令和5年度・金砂健児の集い(総会・懇親会)報告</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-7%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%818%e3%83%9a%e3%83%bc%e3%82%b8/" target="_blank" rel="noopener">7</a></td>

<tr />
<td id="td1" colspan="3">総会出欠ハガキ ご意見・コメント</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-9ページ/" target="_blank" rel="noopener">9</a></td>	

<tr />
<td id="td1" colspan="4"><span id="span2">[同級会報告]</span></td>

<tr />
<td id="td1s">〇第14回S39卒秋工建築科同級会</td>
<td id="td2" colspan="2">小野 直美 (昭和39年建築科卒)
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-10ペーシ゛/" target="_blank" rel="noopener">10</a></td>

<tr />
<td id="td1" colspan="4"><span id="span2">[連載・特別寄稿]</span></td>

<tr />
<td id="td1s">〇成　語</td>
<td id="td2" colspan="2">嵯峨 良平 (昭和43年電気科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-11ページ/" target="_blank" rel="noopener">11</a></td>
<tr />
<tr />
<td id="td1s">〇民謡紀行 《5》</td>
<td id="td2" colspan="2">柳原 藤忠 (昭和39年工業化学科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-12ペーシ゛/" target="_blank" rel="noopener">12</a></td>
<tr />
<td id="td1s">〇秋田石油備蓄基地</td>
<td id="td2" colspan="2">船木 政秋 (昭和44年工業化学科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-1314ページ/" target="_blank" rel="noopener">13</a></td>
<tr />
<td id="td1s">〇戦後の昭和歌謡について《7》 </td>
<td id="td2" colspan="2">山形 俊男 (昭和39年機械科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-15ペーシ゛/" target="_blank" rel="noopener">15</a></td>

<tr />
<td id="td1"  colspan="4"><span id="span2">[母校出場全国大会応援報告]</span></td>
<tr />
<td id="td1s" colspan="3">〇高校ラグビー全国大会(花園)　〇高校ラグビー選抜大会(熊谷)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-17ペーシ゛/" target="_blank" rel="noopener">17</a></td>
<tr />
<td id="td1s" colspan="3">〇高校駅伝全国大会</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-18ペーシ゛/" target="_blank" rel="noopener">18</a></td>
<tr />
<td id="td1" colspan="3"><span id="span2">[創作投稿コーナー]</span> 〇しょしス</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-1920ページ/" target="_blank" rel="noopener">19</a></td>

<tr />
<td id="td1" colspan="3"><span id="span2">[東京秋工会・地区会報告]</span> 〇神奈川 〇東京23区 〇群馬 〇多摩 〇茨城 〇埼玉 〇千葉 〇栃木</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-21ペーシ゛/" target="_blank" rel="noopener">21</a></td>

<tr />
<td id="td1"  colspan="4"><span id="span2">[同好会報告]</span></td>
<tr />
<td id="td1s">〇写真同好会 *会員作品掲載</td><td id="td2" colspan="2">加藤 幸夫 (昭和36年機械科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-23242526ペーシ゛/" target="_blank" rel="noopener">23</a></td>
<tr />
<td id="td1s">〇囲碁同好会<td id="td2" colspan="2">赤川 均 (昭和41年電気科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-27ペーシ゛/" target="_blank" rel="noopener">27</a></td>

<tr /><td id="td1s">〇詩吟同好会<td id="td2" colspan="2">相馬 洋悦 (昭和40年建築科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-27ペーシ゛/" target="_blank" rel="noopener">27</a></td>
<tr />
<td id="td1s" colspan="3">< 詩吟同好会の吟:「祝秋工創立120周年賛我母校」><td id="td4"><a href="https://tokyo-akiko.com/kanasa32-28ペーシ゛/" target="_blank" rel="noopener">28</a></td>
<tr />
<td id="td1s">〇ゴルフ同好会<td id="td2" colspan="2">三平 俊悦 (昭和39年建築科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-29ペーシ゛/" target="_blank" rel="noopener">29</a></td>
<tr />　　　　　
<td id="td1s">〇民謡同好会</td>
<td id="td2" colspan="2">鈴木 彦之 (昭和31年機械科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-30ペーシ゛/" target="_blank" rel="noopener">30</a></td>
<tr />　　　　　
<td id="td1s">〇ハイキング同好会</td>
<td id="td2" colspan="2">奥山 恍 (昭和41年工業化学科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-31ペーシ゛/" target="_blank" rel="noopener">31</a></td>

<tr />
<td id="td1" colspan="4"><span id="span2">[関連団体報告]</span></td>
<tr />
<td id="td1s">〇秋田ふるさと応援団便り</td>
<td id="td2" colspan="2">赤川 均 (昭和41年電気科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-33ペーシ゛/" target="_blank" rel="noopener">33</a></td>

<tr />
<td id="td1s">〇けやき会便り</td>
<td id="td2" colspan="2">遠藤 久志 (昭和43年電気科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-34ペーシ゛/" target="_blank" rel="noopener">34</a></td>

<tr />
<td id="td1">佐藤 弘 副会長を偲ぶ</td>
<td id="td2" colspan="2">佐藤 勲 (昭和40年建築科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-34ペーシ゛-2/" target="_blank" rel="noopener">35</a></td>

<tr />
<td id="td1">田口 芳美 元副幹事長を偲ぶ</td>
<td id="td2" colspan="2">嵯峨 良平 (昭和43年電気科卒)</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-36ペーシ゛/" target="_blank" rel="noopener">36</a></td>

<tr />
<td id="td1" colspan="3">令和5年度会費納入者</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-37ペーシ゛/" target="_blank" rel="noopener">37</a></td>

<tr />
<td id="td1" colspan="4"><span id="span2">[総会議案]</span></td>
<tr />
<td id="td1" colspan="3">会務・決算報告 ＊令和5年度 会務報告<span id="span1">第1号議案</span>＊令和5年度 決算報告・監査報告<span id="span1">第2号議案</span></td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-38ペーシ゛/" target="_blank" rel="noopener">38</a></td>

<tr />
<td id="td1" colspan="3">令和5年度活動報告／令和6年度活動方針・予算<span id="span1">第3号議案</span></td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-39ペーシ゛/" target="_blank" rel="noopener">39</a></td>

<tr />
<td id="td1"  colspan="3">東京秋工会 規約 ・総則 ・運用細則<span id="span1">第4号議案</span></td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-40ペーシ゛/" target="_blank" rel="noopener">40</a></td>

<tr />
<td id="td1" colspan="3">令和6年度東京秋工会 組織図(案)<span id="span1">第5号議案</span></td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-40ペーシ゛-2/" target="_blank" rel="noopener">41</a></td>

<tr />
<td id="td1" colspan="3">賛助広告</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-40ペーシ゛-3/" target="_blank" rel="noopener">42</a></td>

<tr />
<td id="td1" colspan="3">賛助広告</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-43ペーシ゛/" target="_blank" rel="noopener">43</a></td>

<tr />
<td id="td1" colspan="3">賛助広告</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-44ペーシ゛/" target="_blank" rel="noopener">44</a></td>

<tr />
<td id="td1" colspan="3">賛助広告ご協力企業・団体等一覧</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-45ペーシ゛/" target="_blank" rel="noopener">45</a></td>

<tr />
<td id="td1" colspan="3">叙勲/哀悼 、編集後記</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-46ペーシ゛/" target="_blank" rel="noopener">46</a></td>

<tr />
<td id="td1" colspan="3">裏表紙</td>
<td id="td4"><a href="https://tokyo-akiko.com/kanasa32-裏表紙/" target="_blank" rel="noopener">裏表紙</a></td>

</table>

</div>
</div>
</body>
</html>

* a タグのrel="noopener"は、target=”_blank”が指定されている時にセキュリティのためwordpressによって追加されたもの。target=”_blank”は別ページで開くという意味だが、別ページが開いたときに元のページが別の悪意のあるものにすり替えることがあるらしい。



追加CSS

追加cssは、テーマlightning childにあるものを使う。

追加CSS 


/* フッターの背景色 フォントサイズ */
.site-footer {
    background-color: #e6e6fa;
	  font-weight: 500;
    font-size:14px;
}
/*-- akiko index table --       2024.07.29 ---------*/
h2 {
  color:brown;
	text-align:center;
	margin:0px auto;
}
#akiko_itable {
  border:1px solid black;
  width:98%;
  margin:10px auto;
  empty-cells:show;
}
#akiko_itable th , #akiko_itable td {
  text-align:left;
  padding-left:10px;
  background-color:lavender;
  border:1px solid black;
} 
#akiko_itable caption {
	text-align:right;
}
#akiko_itable th {
	background-color:lightcyan;
}
#akiko_itable #td1  {
	  text-align:left;
	  font-weight:bold;
}
#akiko_itable #td1s {
	text-align:left;
	font-weight:bold;
	padding-left:20px;
}
#akiko_itable #td2  {
	text-align:left;
}
#akiko_itable #td2s {
	text-align:left;
	font-weight:bold;
	padding-left:50px;
}
#akiko_itable #td3  {
	text-align:left;
}
#akiko_itable #td4  {
	text-align:center;
	background-color:white;
}
#akiko_itable #td4 a , #td49 a  {
  display:block;
} 
#akiko_itable #td4 a:link    {
  text-decoration:none;
  color:blue;
  background-color:white;
  font-weight:bold;
	text-align:center;
}
#akiko_itable #td4 a:visited {
  text-decoration:none;
  color:purple;
}
#akiko_itable #td4 a:hover   {
  background-color:blue;
  text-decoration:none;
  color:gold;
}
#akiko_itable #td4 a:active  {
  background-color:white;
  text-decoration:none;
  color:black;
}
#akiko_itable #span1 {
  color:snow;
  background-color:blue;
  border-radius:5px;
  padding:0px 5px 0px 5px;
  margin:0px auto 0px 5px;
}
#akiko_itable #span2  {
  color:maroon;font-weight:bold;
}
/* akiko itable end */



wordpressでの表示

上記のカスタムhtmlをwordpressサイトで実行した結果 　会報目次



感想

追加CSSを使いたくないのは、すべての投稿記事に無駄なcssが挿入されるのが理由だが、wordpressで書かれたソースコードを覗くと必要のないと思われるコードが多い。汎用的な使い方に対処するため冗長性を持たせているため。

余談だが日本語で冗長といえば、無駄なとか長たらしいという意味だが、ITで冗長性を持たせるというのはポジティブな意味で不測の事態に備えて余裕を持たせるという意味がある。英語では redundant という。



戻る