ブログのデザイン修正&表(table)表示時の空白削除

1.使用テーマ

wordpressではデザインを変えるのに「テーマ」というのを使っていて、「テーマ」は多数公開されていて簡単に切り替えできます。現在、当ブログのテーマはwordpress同梱の「TwentyFourteen」というのを使ってます。公開されているテーマを20個くらい試してみて、とりあえずこれにしました。

このテーマはブラウザの表示幅によって表示の仕方が異なり、(1)広い状態では記事とサイドバー、(2)中間の状態では記事の下に(1)のサイドバーが表示され、(3)狭い状態では記事タイトル一覧の下に(1)のサイドバーが表示されます。(1)と(2)の切り替わる幅も広過ぎるような気もするのだけど、より気になったのは、記事本体の表示幅が狭すぎるという事。

2.記事本体幅の拡張

記事本体の幅を広げました。調べてみるとTwentyFourteenのスタイルシート内で max-width:474px となっている。wordpressでは、このような変更を行う方法として、バージョンアップの影響を受けにくい「子テーマ」の作成を推奨している。

「TwentyForteen-child]というのを作成。この中のスタイルシートに変更する部分のみを記述。

3.表(table)表示時の空白行削除

ブラウザに表示するものは、htmlを使って色々なタグをつけて記述する事になっている。ブログは、単に普通のテキストとして書いた文章に、適切にタグを挿入してブラウザに送っています。表を書くにはtableというタグを使って記述するのだが、wordpressはこれらにも余分な改行タグを追加してしまうので、複雑な表ほど、表の前に空白行がたくさん入ってしまう。

これはwp-includes/formatting.phpの中にある、wpautopというfunctionが行っている。このfunctionをコピー&修正したwpautop2というのを子テーマに書いて、オリジナルのwpautopの代わりにwpautop2を使うように設定して解決した。

4.子テーマの内容

子テーマは2ファイルからなる
<wp-content/themes/twentyforuteen-child/style.css>

/*
Theme Name: Twenty Fourteen Child
  (途中省略)
*/

.site-content .entry-header,
.site-content .entry-content,
.site-content .entry-summary,
.site-content .entry-meta,
.page-content {
margin: 0 auto;
max-width: 640px; /* original - 474px; */
}

<?php

function wpautop2( $pee, $br = true ) {
 
  (途中省略:オリジナルと同じ)

// table関係のtag後にある<br />を削除する inserted 2016-5-25 清水
$pee = preg_replace( "/(<table[^<>]*>|<\/table>|<\/?tbody>|<\/?tr>|<\/?td>)\s*\n/i", "$1\n", $pee );

return $pee;
}

remove_filter('the_content', 'wpautop');
add_filter('the_content', 'wpautop2');

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); // 親テーマの指定
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です