701
回編集
差分
ナビゲーションに移動
検索に移動
ページの作成:「WrodPressの機能で、文章中に「<nowiki><!--nextpage--></nowiki>」を入れると、記事がページ分割されるのがあるんだよ。でも、デフォル…」
WrodPressの機能で、文章中に「<nowiki><!--nextpage--></nowiki>」を入れると、記事がページ分割されるのがあるんだよ。でも、デフォルトだとかなりショボイ感じになってしまうんだ。今回、[http://rinpress.com 自分のホームページ]の「<nowiki><!--nextpage--></nowiki>」の見た目を変えてみたので、そのやり方を上げてみるよ。
== 関数を追加する ==
参考サイトによると、「wp_link_pages_args」をフックして関数を呼び出すって書いてあるんだけど…まだ僕には良くわからない…（笑）<br/>
正しいかどうか分からないけど…WordPressの「wp_link_pages」関数を呼び出す前に、引数のデフォルト配列を書き換えている感じかな…
<ol>
<li>WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。</li>
<li>画面右側の一覧から「テーマのための関数(functions.php)」を選んでね。</li>
<li>ソースの一番下（「<nowiki>?></nowiki>」の手前）に以下を追加してね。
<source lang="php">
function custom_wp_link_pages() {
$defaults = array(
'before' => '<div class="pagesprit"><div class="page-numbers">',
'after' => '</div></div>',
'link_before' => '',
'link_after' => '',
'next_or_number' => 'number',
'separator' => ' ',
'nextpagelink' => __( 'Next page' ),
'previouspagelink' => __( 'Previous page' ),
'pagelink' => '<span class="numbers">%</span>',
'echo' => 1
);
return $defaults;
}
add_filter( 'wp_link_pages_args', 'custom_wp_link_pages');
</source>
（参考サイトのコードを少し修正させていただきました…「<nowiki>'after' => '</div>',</nowiki>」だと画面が崩壊したので…。STINGER3の特性かもしれないです…。）
</li>
<li>画面下の「ファイルを更新」ボタンをクリックしてね。</li>
</ol>
== 見た目の調整 ==
divタグでclassを追加できたので、これに対してスタイルを指定するよ。
<ol>
<li>WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。</li>
<li>画面右側の一覧から「スタイルシート(style.css)」を選んでね。</li>
<li>ソースの一番下に以下を追加してね。好みに合わせて変更もありだよ。
<source lang="css">
.pagesprit {
clear: both;
color: #27364f;
line-height:1.714285714;
}
.page-numbers a {
display:inline-block;
border:solid 1px #ccc;
border:solid 0.0714285714285714rem #ccc;
text-decoration:none;
}
.page-numbers a:hover {
color:white;
background: #27364f;
}
.numbers {
margin: 0 8px;
margin: 0 0.5714285714285714rem;
}
</source>
</li>
<li>画面下の「ファイルを更新」ボタンをクリックしてね。</li>
</ol>
=== 補足 ===
cssが分かっている人は不要かもしれないけど…ちょっと補足しておくね。
:;pagesprit:ページ切り替え部分の全体の見た目を調整する部分だよ。
:;page-numbers a:リンクが張られるページ番号（現在いるページ以外）の見た目を調整する部分だよ。
:;page-numbers a：hover:リンクが張られるページ番号（現在いるページ以外）にマウスカーソルを合わせた場合の見た目を調整する部分だよ。
:;numbers:ページ番号そのものの見た目を調整する部分だよ。
== STINGER3のスマホサイトの場合 ==
STINGER3はスマホ用に「smart.css」ってファイルが準備されているから、このファイルを編集してね。
== 参考サイト ==
[http://beam.co.jp/wordpress/1537 YOSHIHARA.LAB - 記事の分割<!–nextpage–> での表示をカスタマイズ]
[[Category:WordPress]]
{{DISPLAYTITLE:nextpageの見た目を変えてみる}}
== 関数を追加する ==
参考サイトによると、「wp_link_pages_args」をフックして関数を呼び出すって書いてあるんだけど…まだ僕には良くわからない…（笑）<br/>
正しいかどうか分からないけど…WordPressの「wp_link_pages」関数を呼び出す前に、引数のデフォルト配列を書き換えている感じかな…
<ol>
<li>WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。</li>
<li>画面右側の一覧から「テーマのための関数(functions.php)」を選んでね。</li>
<li>ソースの一番下（「<nowiki>?></nowiki>」の手前）に以下を追加してね。
<source lang="php">
function custom_wp_link_pages() {
$defaults = array(
'before' => '<div class="pagesprit"><div class="page-numbers">',
'after' => '</div></div>',
'link_before' => '',
'link_after' => '',
'next_or_number' => 'number',
'separator' => ' ',
'nextpagelink' => __( 'Next page' ),
'previouspagelink' => __( 'Previous page' ),
'pagelink' => '<span class="numbers">%</span>',
'echo' => 1
);
return $defaults;
}
add_filter( 'wp_link_pages_args', 'custom_wp_link_pages');
</source>
（参考サイトのコードを少し修正させていただきました…「<nowiki>'after' => '</div>',</nowiki>」だと画面が崩壊したので…。STINGER3の特性かもしれないです…。）
</li>
<li>画面下の「ファイルを更新」ボタンをクリックしてね。</li>
</ol>
== 見た目の調整 ==
divタグでclassを追加できたので、これに対してスタイルを指定するよ。
<ol>
<li>WordPressのダッシュボードから、「外観」→「テーマ編集」を選んでね。</li>
<li>画面右側の一覧から「スタイルシート(style.css)」を選んでね。</li>
<li>ソースの一番下に以下を追加してね。好みに合わせて変更もありだよ。
<source lang="css">
.pagesprit {
clear: both;
color: #27364f;
line-height:1.714285714;
}
.page-numbers a {
display:inline-block;
border:solid 1px #ccc;
border:solid 0.0714285714285714rem #ccc;
text-decoration:none;
}
.page-numbers a:hover {
color:white;
background: #27364f;
}
.numbers {
margin: 0 8px;
margin: 0 0.5714285714285714rem;
}
</source>
</li>
<li>画面下の「ファイルを更新」ボタンをクリックしてね。</li>
</ol>
=== 補足 ===
cssが分かっている人は不要かもしれないけど…ちょっと補足しておくね。
:;pagesprit:ページ切り替え部分の全体の見た目を調整する部分だよ。
:;page-numbers a:リンクが張られるページ番号（現在いるページ以外）の見た目を調整する部分だよ。
:;page-numbers a：hover:リンクが張られるページ番号（現在いるページ以外）にマウスカーソルを合わせた場合の見た目を調整する部分だよ。
:;numbers:ページ番号そのものの見た目を調整する部分だよ。
== STINGER3のスマホサイトの場合 ==
STINGER3はスマホ用に「smart.css」ってファイルが準備されているから、このファイルを編集してね。
== 参考サイト ==
[http://beam.co.jp/wordpress/1537 YOSHIHARA.LAB - 記事の分割<!–nextpage–> での表示をカスタマイズ]
[[Category:WordPress]]
{{DISPLAYTITLE:nextpageの見た目を変えてみる}}
