40：ビジュアルモードをブラウザ表示に近づける

公開日:2018年11月08日更新日:2019年07月15日

WordPress

オリジナルテーマ作成

ビジュアルモードにstyle.cssを読み込ませブラウザ表示デザインに近づけます。

通常のビジュアルモード

style.cssを読み込ませたビジュアルモード

content-page.php

<?php // アイキャッチ画像 ?>
<div class="thumbnail">
<?php echo getThumbnail(); ?>
</div>

<?php // タイトル ?>
<h2 class="title"><?php the_title(); ?></h2>

<?php // 本文 ?>
<div class="article"><?php the_content(); ?></div>

content-single.php

<?php // アイキャッチ画像 ?>
<div class="thumbnail">
<?php echo getThumbnail(); ?>
</div>

<?php // タイトル ?>
<h2 class="title"><?php the_title(); ?></h2>

<?php // カテゴリ文字列 ?>
<?php echo getCatLinkList(); ?>

<?php // タグ文字列 ?>
<?php echo getTagLinkList(); ?>

<?php // 本文 ?>
<div class="article"><?php the_content(); ?></div>

<?php // 公開日時 ?>
<div class="release-date">公開日時：<?php the_time('Y年m月d日'); ?></div>

<?php // 最終更新日時 ?>
<div class="modified-date">最終更新日時：<?php the_modified_date('Y年m月d日'); ?></div>

style.css

body {
  background-color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

/*投稿・固定ページ本文タイトル*/
/* ========================================== */
/*タイトル*/
.article h1 {
  background-color: #a5ede5;
  color: #273727;
  font-size: 32px;
  padding: 8px 14px 5px;
  margin: 20px 0;
  text-shadow: 2px 2px 0px #fff;
}
.article h2 {
  border-bottom: solid 5px;
  color: #273727;
  font-size: 30px;
  padding: 6px;
  margin: 30px 0 20px;
  text-indent: 0;
}
.article h3 {
  border-bottom: solid 2px;
  color: #273727;
  font-size: 26px;
  padding: 6px;
  margin: 30px 0 20px;
}
.article h4 {
  color: #273727;
  font-size: 26px;
  padding: 0;
  margin: 20px 0 10px;
}
.article h5 {
  color: #273727;
  font-size: 23px;
  padding: 0;
  margin: 20px 0 10px;
}
.article h6 {
  color: #273727;
  font-size: 20px;
  padding: 0;
  margin: 20px 0 10px;
}

functions.php

// ビジュアルエディタにstyle.css割り当て
add_editor_style( 'style.css' );
// ビジュアルエディターのクラス名にclassを追加
function tiny_mce_add_class( $mceInit ) {
  $mceInit['body_class'] .= ' article';//追加クラス名
  return $mceInit;
}
add_filter( 'tiny_mce_before_init', 'tiny_mce_add_class' );