simplicity2のデザインなどWordPressカスタマイズ一覧まとめ

phpやcssなどいろいろなsimplicityのカスタマイズの小ネタをまとめていく予定です。みたいところから見てください。

WordPressのテーマおすすめ

日本のWordPressのテーマ

日本のWordPressのテーマはこちらの記事をみてください。

海外のWordPressのテーマ

かなりの量の海外のテーマも使ってきましたが、simplicityは非常によくできたテンプレートだと思います。日本のsimplicity2に乗り換えましたが、海外のテーマの方が進んでいる部分もあります。いくつかサイトを運営しているため、今後は海外のテーマとわいはらさんが作ったsimplicityの後続cocoonのいずれかを利用していこうと思います。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

ebookbrain.net

WordPressの海外テーマ/テンプレート7選おすすめで安いのは?

ebookbrain.net

simplicityの子テーマ

simplicityは子テーマを作者自身が用意してくれているため、子テーマを利用した方が後々楽です。
ダウンロードできます。というか他のテーマも子テーマを使った方がいいですけどね。
子テーマの作り方や理解を深めるために、こちらの記事なんかを参考にしてください。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

ebookbrain.net

12user

simplicityのh2手前にウィジェット表示

h2手前にウィジェット表示するカスタマイズはこちらにまとめました。simplicityの広告機能は利用せずこちらを利用していますね。

【Cocoon/Swell】H2見出し上にGoogleアドセンス(広告ウィジェット)【目次上は危険!?】

ebookbrain.net

simplicityでスマホのリンクがはみ出すため対応

リンクがはみ出すと、本文が端から端まで短くなってしまう場合があります。
リンクを直書きした場合も起こるようです。

/* simplicityでスマホのアドレスがはみ出すため対応 */
body {
    word-wrap: break-word;
}

simplicityでスクロール追従領域の座標を変更

トップメニューの領域を広げた場合、追従領域の座標を変更したいことがあります。 javascript.jsのファイルを開き、こちらの値を増やせば下に表示されます。

var side_top_margin = 60;

#sidebar-scrollあたりからソースを追えばすぐ見つかるでしょう。

simplicityで追従SNSボタンの座標を変更

javascript.jsのファイルを開いて変更します。
追従前と追従後の座標は同じにしておけば、座標が飛んだように見えないでしょう。

      if (now > main_top) {
        //sharebar.fadeIn('fast');
        sharebar.css({
          position: 'fixed',
          top: '70px' // この値を変更すると追従後の座標が変わる
        });
      } else{
        sharebar.css({
          position: 'absolute',
            top: main_top+70 // この値を変更すると追従前(デフォルト)の座標が変わる
        });
      };

simplicity 2の全部の記事でfacebookのいいねがゼロ0に

facebookの仕様変更が原因で取得方法が変わったようです。ファイルはjavascript.js

1行コメントアウトして追加すれば終了です。

//facebookの仕様変更 jQuery( selector ).text( res.shares || 0 );
jQuery( selector ).text( res.share.share_count || 0 );

facebookページのいいねとTwitterのフォロワー数表示

simplicityの項目をみてください。

facebookページのいいねのWordpressプラグインまとめ

ebookbrain.net

simplicity 2でGoogleの検索結果に最終更新日を伝える

Googleの検索結果に最終更新日を伝えることは、かなり重要ですよね。ユーザーによっては期間で絞りこんでくるので。通常、公開日と更新日を表示して、更新日を伝えるようにしています。

外観 > カスタマイズ > SEO > 検索エンジンに伝える日付 > 更新日

ただし、うまく伝わらないときは、一時的にスイッチしてもいいかもしれません。

外観 > カスタマイズ > SEO > 検索エンジンに伝える日付 > 更新日（更新したら更新日だけを表示）β版

Googleの検索結果が更新日に切り替わったら元に戻してもいいかもですし。simplicityはデフォルトで用意しているため、コードを書かなくてよく楽ですね。

simplicity 2のアイキャッチの表示

デフォルトではアイキャッチは表示されないようですが、コードをいじらなくても表示する機能を持っています。

レイアウト（投稿・固定ページ） > 本文先頭にアイキャッチ画像を表示
にチェックをいれます。

画像 > アイキャッチを自動設定
は本文中の画像を自動取得なので間違えないようにします。個人的にはこちらは使用しません。

simplicity 2の初期のサムネイズサイズ

functions.phpに以下のように書かれていました。

//サムネイルサイズ
add_image_size('thumb100', 100, 100, true);
add_image_size('thumb150', 150, 150, true);
add_image_size('thumb320', 320, 180, true);

アイキャッチのプラグインを利用する際、把握する必要があったため調べてみました。

【乗り換え】Flash Uploader → Media from FTP → Bulk Media Register《Wordpressのプラグインの使い方》

ebookbrain.net

16user

simplicity 2専用のコメントウィジェットの日付を消去

Simplicityには専用のコメントウィジェットがあります。その日付を消去してみました。

/* Simplicity専用のコメントウィジェットの日付を消去 */
.recent-comment-date {
	display:none;
}
.recent-comment-title {
	clear: none;
}

ちなみに、現在は他のプラグインを採用しています。ただのデザインの好みの問題です。

WordPressで「最近のコメント」ウィジェットをカスタマイズするプラグイン比較、おすすめはどれ？

ebookbrain.net

simplicity 2でSimple Author Boxを追加

simplicityはプロフィールを追加する機能がないため、Simple Author Boxを使って追加します。

Simple Author Boxについてはこちら。

「Simple Author Box」の使い方・CSSのカスタマイズ | Wordpressのプラグイン

ebookbrain.net

simplicity 2の場合、single-page.phpに追加します。

<!-- プロフィール追加 -->
<?php if ( function_exists( 'wpsabox_author_box' ) ) echo wpsabox_author_box(); ?>

このサイトでは追加していません。

simplicity 2でPCのメニューを固定にする

このサイトは実装していません。

海外のテーマではメニューが固定になっているデザインも少なくありません。

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)

ebookbrain.net

simplicityはすごくよくできたテーマなのですが、デメリットはデザインにあるかもしれません。そこでタイトルとグローバルメニュを入れ替えてメニューを固定にします。よくある海外のテーマと同じにします。

まず、上書きしないようにheader.phpの子テーマを作ります。作り方はこちらをみてください。

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利

ebookbrain.net

12user

header.phpでナビゲーションのコードを探します。

      <?php if (is_navi_visible())://ナビゲーションが表示のとき
        get_template_part('navi');//グローバルナビのためのテンプレート
      endif; ?>

上の方に移動します。

    <div id="container">

      <!-- ナビゲーションの移動後の位置 -->
      <?php if (is_navi_visible())://ナビゲーションが表示のとき
        get_template_part('navi');//グローバルナビのためのテンプレート
      endif; ?>

      <!-- header -->
      <header itemscope itemtype="http://schema.org/WPHeader">

cssのposition: fixed;でメニュを固定にします。影などはお好みでつけてください。

/* 固定メニュー */
#navi {
	position: fixed;
	width: 100%;
	z-index: 999;

	padding-top: 33px;
	-webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

タイトルの位置がメニューとかぶるため、修正します。

#site-title {
    margin: 70px 0 0 0;
}

このままだと端から端までメニューが広がりません。

simplicityの「グローバルナビを横幅いっぱいにする」をチェックします。simplicityからsimplicity2になったとき、「グローバルナビを横幅いっぱいにする」の場所が移動しています。

simplicity:色 > グローバルナビを横幅いっぱいにする
simplicity2:ヘッダー > グローバルナビを横幅いっぱいにする

色 > グローバルナビ色で色も調整します。

simplicity 2でスマホのメニューを固定にする

simplicityにはsliderが組み込まれているため、それで固定する方法がありますが、sliderの仕様が左右からでるメニューになっていました。個人的にそれは気に入らずプラグインで固定にしました。

Wordpressでスマホのヘッダーメニューを固定するプラグインまとめ

ebookbrain.net

元からあるスマホのメニュは消します。

simplicity 2でスマホのメニュを消す

mobile.cssに追加します。

#mobile-menu {
    display: none;
}

ただし、この方法はタブレットは消えません。

simplicity 2のトップページにスライダーを追加する

このサイトとは実装していません。

海外のテーマではトップページがスライダーになっているものが少なくありません。layerslider(有料)などのプラグインを利用し、is_front_pageで切りわけます。

<!-- トップページのみスライドを追加 -->

<?php if ( is_front_page() ): ?>
	<!-- スライダーのコード -->
	<?php layerslider(1) ?>
<?php endif; ?>

simplicity 2でurlをブログカード化しない

ドメインに関する技術的な解説をする場合、アドレスをブログカード化したくない場合があります。

<div class="no-blogcard">URL</div>

半角スペースや文字をひっつけてもうまくいきます。

参考：https://ebookbrain.net/

simplicity 2でブログカードの色変え

hoverも色を変えるとわかりやすいでしょう。

/* simplicityのブログカード色変え */
.internal-blog-card{
	background-color: #f2f2f2;
}
.internal-blog-card:hover{
	background-color: #D9D0BE;
}
.blog-card-title a{
	color: #1e50a2;
	text-decoration: none;
}

.blog-card-title a:hover {
	color: #cc0033;
	text-decoration: none;
}

simplicity2でブログカードの日付を消す

管理画面からできます。

外観 > カスタマイズ > ブログカード > 日付表示

ブログカードは内部リンクと外部リンクがわかれています。

simplicity 2で本文下(記事下)に追記

2つの方法がありますね。simplicity2のthe_contentはsingle.phpではなく、entry-body.phpに書いてあるんですね。

本文の最後にコードを追記したいのですが、どのファイルのどこにいれればいいのでしょうか？

wp-simplicity.com

今回、うちはthe_contentのフックで対応しました。モバイルとの切り分けを行いました。

the_contentのフック、スマホ(モバイル)のみ本文下(記事下)に表示するコード

ebookbrain.net

simplicity 2で背景を指定する、背景は重たいの?

デフォルトのカスタマイズのみでできます。すごい!

ちなみに、背景はそれほど重たくありません。念のためスピードテストをしましたが、影響はありませんでした。ただし、12kbぐらいまで減色し、シームレスのパターンで繋ぎました。

simplicity2で背景を指定する方法です。

外観 > カスタマイズ > 背景

背景を指定すると、サイドバーとメニューが背景に埋もれる場合が多いです。

外観 > カスタマイズ > レイアウト設定（全体・リスト） > サイドバーの背景を白色に

メニューの背景色も指定します。

外観 > カスタマイズ > 色 > グローバルナビ色

simplicity 2でmarkerのカスタマイズ

マーカーを全部塗らず、色も変えたいと思いました。

simplicity2には実は黄色のアンダーラインマーカーが用意されています。

<span class="marker-under">黄色のアンダーラインマーカー</span>

しかし、デフォルトのマーカー1種類しか使っていなかったため、そちらをカスタマイズしました。置き換えるのも面倒だったので。子テーマに記述して上書きすればいいだけです。

/* デフォルトマーカー変更　 */
.marker {
	background: linear-gradient(transparent 50%, #f0e68c 50%);
	font-weight: bold;
}

linear-gradientの使い方はこちらの記事をみてください。

safari(ios)で効かない!?linear-gradientの使い方(transparentの透明度、斜め、%指定、蛍光ペンのマーカー)

ebookbrain.net

何かあれば追記していきます。