ブログスタイルの最適化

ブログテンプレートを切り替えるたびに、いくつかの部分が満足できないと感じることが多いです。今回の maupassant テンプレートも例外ではなく、自分の中途半端なコードスキルを活かして、元のテンプレートを基にいくつかの修正と最適化を行いました。ここでは、同じニーズを持つ友人の参考のために、一部の修正方法を記録します。

1. 記事の日付の修正#

主にホームページのタイトル下の日付と、サイドバーのアーカイブ日付の表示を修正しました。修正方法は以下の通りです。

index.php ファイルを開き、date ('n 月 j, Y') に変更します。

<date class="post-meta">
	<?php $this->date('n月 j, Y'); ?>
</date>

sidebar.php ファイルを開き、type=month&format=Y 年 m 月に変更します。

<section class="widget">
	<h3 class="widget-title"><?php _e('アーカイブ'); ?></h3>
    <ul class="widget-list">
        <?php $this->widget('Widget_Contents_Post_Date', 'type=month&format=Y年m月')
        ->parse('<li><a href="{permalink}">{date}</a></li>'); ?>
    </ul>
</section>

2. リンクの色の修正#

maupassant テンプレート自体のリンクの色は、読書時の感覚体験があまり良くないため、自分で修正しました。修正方法は以下の通りです。

style.css ファイルを開き、color を #C83C23 に変更します。

.post-content a, .comment-content a {
    border-bottom:1px solid #ddd;
    color: #C83C23;
}

3. コードハイライトの修正#

テンプレートに付属のコードハイライトにあまり満足していなかったので、highlight.js を基に修正しました。修正方法は以下の通りです。

footer.php ファイルを開き、highlight.js をインポートします。

<script src="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

header.php を開き、CSS スタイルシートをインポートします。自分でhighlight.jsの公式サイトで選択できます。

<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/styles/default.min.css">

4. 中西文の自動スペース追加#

中西文の間にスペースを入れるレイアウト方式に慣れているため、ネットを参考にして修正しました。修正方法は以下の通りです。

footer.php ファイルを開き、<body> タグ内に以下のコードを追加します。

<!-- 自動スペース追加 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.min.js"></script>
<script>
  const text = pangu.spacing("當你凝視著bug，bug也凝視著你");
  // text = '當你凝視著 bug，bug 也凝視著你'

  pangu.spacingElementById('main');
  pangu.spacingElementByClassName('comment');
  pangu.spacingElementByTagName('p');

  document.addEventListener('DOMContentLoaded', () => {
    // DOMの変更を監視し、MutationObserver()を介して自動的にスペースを追加します
    pangu.autoSpacingPage();
  });
</script>

5. 記事ページにページ送りを追加#

maupassant テンプレートの文章ページには、デフォルトで前の記事、次の記事のようなページ送り機能がありません。追加方法は以下の通りです。

post.php ファイルを開き、</article> タグの後に以下のコードを追加します。

<div class="post-nav">
	<div class="post-nav-pre" style="float:left;">
		<?php $this->thePrev('前の記事 : %s', ''); ?>
	</div>  
	<div class="post-nav-next" style="float:right;">
	    <?php $this->theNext('次の記事 : %s', ''); ?>
	</div>
</div>

スタイルを私と同じにしたい場合は、style.css を開き、以下のコードを追加します。

/* 記事ページ送り */
.post-nav{
    overflow: hidden;
    margin: 35px 0;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}

.post-nav-pre a{
    color:#C83C23;
}

.post-nav-next a{
    color:#C83C23;
}

6. サイドバーの最新記事#

サイドバーのデフォルトの最新記事は 10 件呼び出されますが、少し多すぎるため、自分で 5 件に調整しました。修正方法は以下の通りです。

sidebar.php を開き、Widget_Contents_Post_Recent の後に：,'pageSize=5' を追加します。

<ul class="widget-list">
    <?php $this->widget('Widget_Contents_Post_Recent','pageSize=5')
    ->parse('<li><a href="{permalink}">{title}</a></li>'); ?>
</ul>

7. 著作権声明の追加#

記事を読むとき、結末をはっきりさせる必要があると感じたので、著作権声明を追加して区別しました。最適化方法は以下の通りです。

post.php を開き、</article> タグの後に著作権声明のコードを追加します。

<div class=copyright>
    <div class=cp-title>
        <strong>記事タイトル：</strong><?php $this->title(); ?>
    </div>
    <div class=cp-author>
        <strong>記事作者：</strong><?php $this->author(); ?>
    </div>
    <div class=cp-date>
        <strong>公開日：</strong><?php $this->date('Y 年 m 月 d 日'); ?>
    </div>
    <div class=cp-update>
        <strong>更新日：</strong><?php echo date('Y 年 m 月 d 日', $this->modified);?>
    </div>
    <div class=cp-url>
        <strong>元のリンク：</strong><a href="<?php $this->permalink() ?>"><?php $this->permalink() ?></a>
    </div>
    <div class=cp-cc>
        <strong>ライセンス：</strong><a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="noopener noreferrer nofollow">表示 4.0 国際（CC BY 4.0）</a>、転載する際は原文リンクと作者を保持してください。
    </div>
</div>

style.css を開き、著作権声明のスタイルを追加します。

/* 著作権声明 */
.copyright{
    background-color: #f0f0f0;
    padding: 12px;
    line-height: 1.6;
}
.cp-url a{
    color:#C83C23;
    border-bottom: 1px solid #ddd;
}
.cp-cc a{
    color: #C83C23;
    border-bottom: 1px solid #ddd;
}

8. 賞金機能の追加#

実際にはこの機能を追加するかどうか迷いましたが、自分の記事が誰かに賞賛されるレベルには達していないと感じています。しかし、見た目を良くするために、先に追加しました。もしかしたら、どこかの大物が支援してくれるかもしれません。追加方法は以下の通りです。

post.php を開き、適切な位置に以下のコードを追加します。

<div style="padding: 10px 0; margin: 20px auto; width: 100%; font-size:16px; text-align: center;"> 
    <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}"> <span>賞金</span> </button> 
    <p style="color:#999;font-size:14px;">多寡は自由、豊かさは人による</p>
    <div id="QR" style="display: none;"> 
        <div id="wechat" style="display: inline-block"> 
        <a class="fancybox" rel="group"><img id="wechat_qr" src="https://chilohdata.oss-cn-hongkong.aliyuncs.com/imgs/wechatpay.png" alt="WeChat Pay" /></a> 
        <p> 微信賞金 </p> 
        </div> 
        <div id="alipay" style="display: inline-block"> 
        <a class="fancybox" rel="group"><img id="alipay_qr" src="https://chilohdata.oss-cn-hongkong.aliyuncs.com/imgs/alipay.png" alt="Alipay" /></a> 
        <p> アリペイ賞金 </p> 
        </div> 
    </div> 
</div>

style.css を開き、賞金ボタンのスタイルを追加します。自分の好みに応じて変更できます。

/* 記事賞金 */
#QR {
    padding-top: 20px;
    border: #f05050;
}

#QR a {
	border: 0
}

#QR img {
	width: 180px;
	max-width: 100%;
	display: inline-block;
	margin: .8em 2em 0 2em
}

#rewardButton {
	border: 1px solid #f05050;
	line-height: 36px;
	text-align: center;
	height: 36px;
	display: block;
	border-radius: 4px;
	-webkit-transition-duration: .4s;
	transition-duration: .4s;
	background-color: #f05050;
	color: #fff;
	margin: 0 auto;
	padding: 0 25px
}

#rewardButton:hover {
	color: #f77b83;
	border-color: #f77b83;
	outline-style: none
}

#rewardButton {
	background-color: #f05050;
	color: white;
	border-radius: 50px;
	cursor: pointer;
}

9. 簡単にまとめると#

上記は maupassant テンプレートに基づいて行ったいくつかの簡単な最適化です。すべての修正後の効果は、ウェブサイトで直接見ることができます。わからないことがあれば、コメントでお互いに交流するか、下のメールで私に連絡してください。

メール： Y2hpbG9od2VpQGdtYWlsLmNvbQ==（注：Base 64 デコード）