「テンプレート」タグアーカイブ

sango のビジュアルエディターのバグ修正(スマホでTinyMCEの文字修飾が変) WordPress BuddyPressカスタマイズメモ

サンゴのテーマのビジュアルエディターで、スマホの「スタイル」のバグを修正する

WordPressのテーマ、SANGOのビジュアルエディター(スマホ版)の「スタイル」で文字修飾が使えないバグを修正する。

PCでやると、入れ子構造になって、色々な文字修飾が選べて便利。

スマホでやると、入れ子構造が表示できず、全く使えない。

 

諸悪の根源、問題の箇所

サンゴのビジュアルエディター文字修飾は、

themes/sango-theme/library/functions/style-shortcode.php の中の

add_filter('widget_text', 'do_shortcode' );
function sng_editor_setting($init) {
 //ビジュアルエディターの選択肢からh1見出しを削除(h1は記事本文では使用しない)
 $init['block_formats'] = 'Paragraph=p;Heading 2=h2;Heading 3=h3;Heading 4=h4;Heading 5=h5;Preformatted=pre';
 $style_formats = array(
 array(
 'title' => '画像のスタイル',
 'items' => array(
  array(
  'title' => '画像を小さく',
  'selector' => 'img',
  'classes' => 'img_so_small'
  ),...以下略

という記述のファンクションで規定されている。

これを自分の子テーマの functions.php で上書きする。
 

functions.php へ記述

サンゴのバグだと書いたが、実は問題は入れ子構造にある。

スマホでは、TinyMCEの入れ子構造の選択ができない。

スマホの時は、これを上書きして入れ子構造をなくす以外に方法はない。

if ( wp_is_mobile() ) { // スマホ(タッチパネルデバイスのタブレット含む)の時だけ
function yuya_style_init( $init ) {
	$style_formats_headlines = array(
      array(
        'title' => 'Q&Aの「Q」',
        'block' => 'p',
        'classes' => 'hh hhq',
      ),
      array(
        'title' => 'Q&Aの「A」',
        'block' => 'p',
        'classes' => 'hh hha',
      ),
      array(
        'title' => '見出し1:下線',
        'block' => 'p',
        'classes' => 'hh hh1',
      ),
      array(
        'title' => '見出し32:フラット塗りつぶし',
        'block' => 'p',
        'classes' => 'hh hh32',
      ),
      array(
        'title' => '見出し33:角丸ぬりつぶし',
        'block' => 'p',
        'classes' => 'hh hh33',
      ),
      array(
        'title' => '見出し34:肉球',
        'block' => 'p',
        'classes' => 'hh hh34',
      ),
      array(
        'title' => '見出し35:リボン(1行のみ)',
        'block' => 'p',
        'classes' => 'hh hh35',
      ),
      array(
        'title' => '見出し36:片側リボン(1行のみ)',
        'block' => 'p',
        'classes' => 'hh hh36',
      ),array(
        'title' => '1.黒の囲み線',
        'block' => 'div',
        'classes' => 'sng-box box1',
        'wrapper' => true,
      ),
      array(
        'title' => '2.グレイの囲み線',
        'block' => 'div',
        'classes' => 'sng-box box2',
        'wrapper' => true,
      ),
      array(
        'title' => '3.薄い水色の背景',
        'block' => 'div',
        'classes' => 'sng-box box3',
        'wrapper' => true,
      ),
      array(
        'title' => '4.薄い水色+上下線',
        'block' => 'div',
        'classes' => 'sng-box box4',
        'wrapper' => true,
      ),
      array(
        'title' => '5.二重線囲み',
        'block' => 'div',
        'classes' => 'sng-box box5',
        'wrapper' => true,
      ),
      array(
        'title' => '6.青の点線囲み',
        'block' => 'div',
        'classes' => 'sng-box box6',
        'wrapper' => true,
      ),
      array(
        'title' => '7.背景グレイ+両端二重線',
        'block' => 'div',
        'classes' => 'sng-box box7',
        'wrapper' => true,
      ),
      array(
        'title' => '8.橙色の背景+左線',
        'block' => 'div',
        'classes' => 'sng-box box8',
        'wrapper' => true,
      ),
      array(
        'title' => '9.赤の背景+上線',
        'block' => 'div',
        'classes' => 'sng-box box9',
        'wrapper' => true,
      ),
      array(
        'title' => '10.ミントカラー+上線',
        'block' => 'div',
        'classes' => 'sng-box box10',
        'wrapper' => true,
      ),array(
        'title' => '11.影+ネイビー上線',
        'block' => 'div',
        'classes' => 'sng-box box11',
        'wrapper' => true,
      ),
      array(
        'title' => '12.水色立体',
        'block' => 'div',
        'classes' => 'sng-box box12',
        'wrapper' => true,
      ),
      array(
        'title' => '13.青の立体',
        'block' => 'div',
        'classes' => 'sng-box box13',
        'wrapper' => true,
      ),
      array(
        'title' => '14.水色ステッチ',
        'block' => 'div',
        'classes' => 'sng-box box14',
        'wrapper' => true,
      ),
      array(
        'title' => '15.ピンクステッチ',
        'block' => 'div',
        'classes' => 'sng-box box15',
        'wrapper' => true,
      ),
      array(
        'title' => '16.水色ストライプ',
        'block' => 'div',
        'classes' => 'sng-box box16',
        'wrapper' => true,
      ),
      array(
        'title' => '17.シャープ型',
        'block' => 'div',
        'classes' => 'sng-box box17',
        'wrapper' => true,
      ),
      array(
        'title' => '18.左上と右下くるん',
        'block' => 'div',
        'classes' => 'sng-box box18',
        'wrapper' => true,
      ),
      array(
        'title' => '19.カギカッコ',
        'block' => 'div',
        'classes' => 'sng-box box19',
        'wrapper' => true,
      ),
      array(
        'title' => '20.両端ドット点線囲み',
        'block' => 'div',
        'classes' => 'sng-box box20',
        'wrapper' => true,
      ),
      array(
        'title' => '21.グラデーション',
        'block' => 'div',
        'classes' => 'sng-box box21',
        'wrapper' => true,
      ),
      array(
        'title' => '22.影付き+左に青線',
        'block' => 'div',
        'classes' => 'sng-box box22',
        'wrapper' => true,
      ),
      array(
        'title' => '23.丸い吹き出し',
        'block' => 'div',
        'classes' => 'sng-box box23',
        'wrapper' => true,
      ),
      array(
        'title' => '24.吹き出し水色',
        'block' => 'div',
        'classes' => 'sng-box box24',
        'wrapper' => true,
      ),
      array(
        'title' => '25.右上に折り目',
        'block' => 'div',
        'classes' => 'sng-box box25',
        'wrapper' => true,
      )
    );
 $init['style_formats'] = json_encode($style_formats_headlines);
 return $init;
}
add_filter( 'tiny_mce_before_init', 'yuya_style_init', 30 );

上記は一例で、極端な話、入れ子構造をなくして、全ての文字修飾を表示することもできる。

しかしそうすると、あまりにも長くなるので、よく使う20個ぐらいを選んで並べておいて、他はスマホでは非表示にする方が使いやすいかもしれない。

何を残すかは、

themes/sango-theme/library/functions/style-shortcode.php の中の

function sng_editor_setting($init) {
...以下略

の中から選んで、順にコピペしていけばいい。

この記事も読まれています

Twenty Twelveのスマホメニューが開かない場合の対処法

WordPressのスマホレイアウトでメニューボタンが動かない!

ある特定の条件下で、Wordpressのテーマ、Twentytwelveのスマホ用メニューが開かない場合がある。
twentytwelve-menu1
この修正方法を紹介。
 

 

条件1 Twentytwelveを使っている。

WordPressのテーマ(テンプレート)にtwentytwelveを使っている時にこれは発生する。TwentyelevenやTwenty thirteen fourteen fifteen…などでは起こらない(今後ずっとおこらないかどうかは不明)

条件2 子テーマを使用していて、header.phpをカスタマイズしている

親テーマのheader.phpがアップデートで変更になった。具体的には端末判定によるスマホ対応ではなく、レスポンシブデザインによるスマホ対応になった。

レスポンシブってなに?って場合はこちらのレスポンシブデザインでtableタグを制御をチェック。

この2つの条件が当てはまる場合に、Twentytwelveのスマホメニューが動かなくなる。
 

 

解決法 子テーマのheader.phpを修正

 
Wordpressの管理画面にログインし「外観」→「テーマ編集」

右上の「編集するテーマを選択:」の箇所がTwentytwelveの子テーマになっている事を確認して、「header.php」を編集する。

メニューの部分が

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>
<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>
<a class=”assistive-text” href=”#content” title=”<?php esc_attr_e( ‘Skip to content’, ‘twentytwelve’ ); ?>”><?php _e( ‘Skip to content’, ‘twentytwelve’ ); ?></a>
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
</nav><!– #site-navigation –>

となっている箇所があるはずなので、その中の

<h3 class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></h3>

を、↓↓↓ に変更するだけ。

<button class=”menu-toggle”><?php _e( ‘Menu’, ‘twentytwelve’ ); ?></button>

これでメニューが動くようになったはずだ。

なお、カスタマイズは自己責任で。心配ならバックアップを取っておこう。

WordPressの子テーマを最速で適用する手順

WordPressのテーマを子テーマ化する最速の方法

細かい説明一切無しの手順。

1.FTPソフトで子テーマフォルダを作る

 

/wp-content/themes の中に 「テーマ名-ch」と言う名のフォルダを作成する。
ちなみに名前はなんでもいいので、適当でもOK。

child-theme1

 

2.作ったフォルダにcssファイルとfunctions.phpファイルをアップロード

FTPソフトで、今作った子テーマフォルダに、style.cssとfunctions.phpをアップロードする。

style.css
functions.txt
↑「右クリック」 「名前を付けて保存」でダウンロードせよ。

style.cssの中身

/*
Theme Name: Child
Template: twentytwelve
*/

Theme Name: これは適当でいい。
Template: の右の「twentytwelve」と書いてある部分は、親のテーマのフォルダ名なので、違うテンプレートを使っている場合は、(FTPソフトなどを見て)親のテーマのフォルダ名に変更する事。

functions.txt の中身

<?php
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}

こちらは編集する必要はないので、拡張子の.txtを、.phpに変更し、functions.phpをそのまま子テーマフォルダにアップロード。
 
 

3. 親テーマのカスタマイズしたphpを子テーマフォルダにアップロード

 
例えば、ヘッダーをカスタマイズした場合、親テーマのheader.phpを一旦ダウンロードし、子テーマフォルダにアップしなおす。
 
child-theme2

 
子テーマフォルダ内はfunctions.php、style.css、header.php(などのカスタマイズしたphpファイル)の3つだけ。
 
child-theme3
 
 

4. ワードプレス管理画面から、テーマを子テーマに変更する

 
「外観」→「テーマ」→「Childなどの子テーマの名前を選んで有効化」
 
※ヘッダー画像、jetpackのCSS編集、メニューなど、テーマ由来の設定は一旦初期化される(削除されるわけではない)ので、先にコピペメモをとるなり、覚えておくなりする事。
一般設定、表示設定、パーマリンク設定などは初期化されないのでそのままでOK。
 
 

5. メニューやCSS編集(jetpackプラグイン)などの設定をやりなおす

 
「外観」→「メニュー」→「位置の管理」で、メニューを以前と同じものを選んだり、ヘッダー画像を戻したりすれば、全て元通り。
 
これで、子テーマ適用完了。

twentyfifteenで灰色の線をなくす方法 Wrodpress

Twenty Fifteen シンプルな記事型ブログに最適なテーマ

シンプルですっきりとしたテーマ/テンプレートなのだが、あとTwentyfifteenに限らず、Twentythirteenもだが、基本的に英語環境で開発されているので、日本語にした時にはフィーリングが合わずしっくりこない。

 

具体的には左のメニューが大きすぎる、コンテンツ部分が少し狭い。灰色のborderが邪魔。などが代表的で一見すると簡単に変更できそうだ。

 

Twentyfifteenは意外とカスタマイズしにくかった

 

理由は以下の通り
・レスポンシブデザインで作られていて、CSSのメディアアンカーを探しにくい
・width などの配置を決めるpadding: 0.7917em 1.5833emなどの桁数が多くピンとこない
・前述の灰色のborderは実はboxshadowでやっているので分かりにくい
 

twentyfifteenで、CSSで簡単にコンテンツ部分を広げる方法

CSSで以下のような記述の部分を探そう。

.site-content {
display: block;
float: left;
margin-left: 20.4118%;
width: 79.5882%;
}

.sidebar {
float: left;
margin-right: -100%;
max-width: 313px;
position: relative;
width: 25.4118%;
}

ここで、 width: や margin-left: の値を好きに変更して、デザインを確かめてみよう。

なお、先述の通り、PC用のデザインを変えたいならメディアアンカーに注意が必要!

@media screen and (min-width: 38.75em) {
/*この間の部分を変更すること*/
}

↑こういう感じのやつ。

 

twentyfifteenで、灰色のborderを非表示に

 
このborderをカスタマイズするのがやっかいだった。
理由は、borderと言いつつ、ここはbox-shadowで描画されているから見つけられなかったのだ。border-left: 1px;などといくら検索しても何も見つからない。

.post-navigation {
border-top: 0;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
margin: 7.6923% 7.6923% 0;
}

こういった感じで、色々なところにbox-shadowで灰色の線が引かれている。

これを以下のように、

box-shadow: 0 0 0 rgba(0, 0, 0, 0.15);

すればとりあえず線は消える。

これも、メディアアンカーに注意だ!