［WordPress］もっとかっこよくしたい

By WordPress

いくらなんでももう少し見栄えよくしたい。
1.あまり長い記事だとページを分けたいこともある。
2.見出しスタイルをもっとかっこよく
3.ソースコードを表示するためのスタイル

１．あまり長い記事だとページを分けたいこともある。

「ページ１」、「ページ２」とかで遷移するやつ。
ページの切れ目に”<!–nextpage–>”を入れればいいようだ。
投稿の編集画面にボタンはないので、テキストモードで直接入力する。


ページ番号も出るようになったが、このスタイルは押しずらい。以下のようにスタイルを追加してみた。

“style.css”に追加
.page-links .pagelink-disp {
    padding: 0;
    margin: 0;
    border: solid 1px #C0D0D0;
    background-color: #469191;
    color: #FFFFFF; }
    
    .page-links a .pagelink-disp {
    padding: 0;
    margin: 0;
    border: solid 1px #C0D0D0;
    text-decoration: none;
    background-color: #FFFFFF;
    color: #000000; }
“base-template-functions.php”に追加
<?php
    wp_link_pages( array(
    'before' => '<div class="page-links">' . __( 'Pages:', 'basepress' ),
    'after' => '</div>',
    'pagelink' => '<span class="pagelink-disp">&nbsp;%&nbsp;</span>',
    ) );
?>

いいかんじ

２．見出しスタイルをもっとかっこよく


「１．WordPressのインストール」に”見出し２”を使ってるけど、もうちょっと見た目よくならないか？
ということでさくっとスタイルをいじってみたよ。

やったのは”style.css”の”.entry-content h2″に”border-bottom”と”border-left”を追加しただけ。

.entry-content h2 {
    border-bottom: solid 1px #3DD86B;
    border-left: solid 5px #3DD86B;
    font-size: 27px;
    line-height: 38px;
    margin-top: 30px;
    margin-bottom: 20px; }

それなりに見やすいし、とりあえずこれで。

３．ソースコードを表示するためのスタイル


こういうやつ欲しい。
“prettyprint”を使うといいのだそうだ。
スタイルはいろいろ種類があるが”atelier-plateau-light.css”を使うことにした。
つーことで、

ページのヘッダに追加（”header.php”に追加）
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<link rel="stylesheet" type="text/css" href="atelier-sulphurpool-dark.css" />
以下のスタイルを追加（”style.css”に追加）
.code {
    font-size: 14px;
    line-height: 1.4;
    padding: 0;
}
.code li.L0, .code li.L1, .code li.L2, .code li.L3, .code li.L4, .code li.L5, .code li.L6, .code li.L7, .code li.L8, .code li.L9 {
    list-style-position: outside;
}
.code em {
    background-color: #E0E0E0;
    display: inline-block;
    width: 100%;
}
.prettyprint figcaption {
    color: white;
    background-color: black;
}
.prettyprint pre {
    padding-top: 0;
    padding-bottom: 0;
}
表示したいソースコードを以下でくくる
<figure class="prettyprint">
<pre><code class="prettyprint lang-html linenums code">　※"lang-html"はhtmlソース用。コンパイル言語とかだといらない。
～
</code></pre>
</figure>

１つ問題が.．．．このタグを毎回書くのめんどくさい（覚えるのもめんどくさい）
プラグイン「AddQuicktag」というのでできるそうな。ついでだから”<!–nextpage–>”も設定したい。
難しいことは何もなかった。使い方はググってください。