ブログの書き方 プログラミング

【WordPress STINGER PLUS2】「続きを読む」のデザインの変え方【改ページ】

投稿日:

こんにちは、犬です。

先日初めて長い記事を書きました!

そこで気づいたのですが、WordPress(テーマ:STINGER PLUS2)のデフォルトだと、ページを切り替えるボタンが

「続きを読む」

って小さく書いてあるだけで、わかりにくいし、かっこよくないんです!

 

そこで、

こんな感じになるようにしました!今回は、そのやり方を解説します!

※デザインは、9ineBBさんの記事を参考にしました。
※ソースコードは、シマテイエンさんの記事を参考にしました。

 

内容

・st-kai-page.phpにコピペ

・style.cssにコピペ

・記事での実装方法

 

 

st-kai-page.phpにコピペ

外観>テーマの編集>st-kai-page.php に移動し、

元々書かれているコードを全て消し、以下のコードに書き換えてください。

※必ず消す前にどこか(メモ帳とか)にコピペしてバックアップをとっておいてください。

<?php	//改ページ
$args = array(
'before' => '<p class="page-page">',
'after' => '</p>',
'link_before' => '<span>',
'link_after' => '</span>',
'pagelink' => 'PAGE %'
);
wp_link_pages( $args );
?>

これでst-kai-page.phpの変更は終了です。

style.cssにコピペ

外観>テーマの編集> スタイルシート(style.css) に移動し、

ソースコードのどこかをクリックして、macは「⌘とf」、windowsは「Ctrlとf」を同時に(⌘またはCtrlを押しながらfを)押してください。
そうすると、写真のように、検索ウインドウが出て来ます。

検索ウインドウが出たら、「改ページ」と検索してください。

そうすると、こんなコードが表示されると思います。

/*続きを読む(改ページ)*/
.tuzuki a {
    width: 100%;
    text-align: center;
    margin: 80px 0 10px;
}

上記のコード(写真の3395行目".tuzuki a {" から 3399行目"}" まで)を消し、以下のコードに書き換えてください。

※必ず消す前にどこかにコピペしてバックアップをとっておいてください。

※読みにくいですが、正しくコピペできます。

.page-page {
    width: 100%;
    text-align: center;
    margin: 80px 0 10px;
    }
	
    .page-page span {
    padding: 7px 10px;
    font-size: 15px;
    background: #fff;
    position: relative;
    box-shadow: 0 0 1px 2px #ffbe4f inset;
    }
	
    .page-page span:before {
    content:"NOW";
    position: absolute;
    top: -120%;
    left: 0; 
    width: 100%;
    display: block;
    text-align: center;
    background: #ffbe4f;
    padding: 5px 0;
    border-radius: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    }
	
    .page-page span:after {
    content:"";
    top: -50%;
    border: 8px solid transparent;
    border-top-color: #ffbe4f;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    border-top: 14px solid #ffbe4f;
    }
	
    .page-page a {
    text-decoration: none;
    }
	
    .page-page a span {
    background: #ffbe4f;
    color: #000;
    padding: 7px 10px;
    color: #fff;
    box-shadow: none;
    font-weight: bold;
    }
	
    .page-page a span:before {
    content:"";
    padding: 0;
    }
	
    .page-page a span:after {
    border: none;
    }
	
    .page-page span {
    opacity : 0.8;
    }

これでstyle.cssの変更は終了です。

記事での実装方法

○TinyMCE Advancedというプラグインをインストールしてる方は、
設定>TinyMCE Advancedから改ページをツールバーに追加し、改ページしたいところで、改ページボタンをクリックするだけです。

 

○TinyMCE Advancedというプラグインをインストールしていない方は、
改ページしたいところに、カスタムHTMLというブロックを追加し、

<!--nextpage-->

というコードを入力してください。
以上で実装完了です。

最後に動作確認をしてください。

 

ブログの書き方に関する記事一覧はこちら

プログラミングに関する記事一覧はこちら

-ブログの書き方, プログラミング,

Copyright© ささやき回廊の犬と猫 , 2019 All Rights Reserved Powered by STINGER.