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

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

WordPressのテーマおすすめ

日本のWordPressのテーマ

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

海外のWordPressのテーマ

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

ebookbrain

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応) Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。 公式サイトはこちらです。入会する場合はJoin to downloadです。 El...

ebookbrain

WordPressの海外テーマ/テンプレート7選おすすめで安いのは? 海外のWordpressの人気テーマを紹介します。やっぱり、Webデザイナーごとにだいたい特色が決まっているため、最近、Webクリエイターごとにポートフォリオを確認するように...

simplicityの子テーマ

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

ebookbrain

WordPressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利 Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。 style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思...

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

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

ebookbrain

【Cocoon/Swell】H2見出し上にGoogleアドセンス(広告ウィジェット)【目次上は危険!?】 WordPressで記事中H2の手前のウィジェット(広告・アドセンス)をカスタマイズする方法についてまとめます。記事に広告やコンテンツバナーを入れるのですが、特定記事を除外...

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の項目をみてください。

ebookbrain

facebookページのいいねのWordPressプラグインまとめ Facebookの個別ページのいいね数ではなく、Facebookページのトータルのいいねを増やすプラグインやテーマについてまとめてみます。これらのプラグインは、いいねを増やす方...

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);

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

ebookbrain

【乗り換え】Flash Uploader → Media from FTP → Bulk Media Register《WordPressのプラグインの使い方》 FTPからアップロードした画像をメディアライブラリに登録するにあたり、結構昔にFlash Uploaderを使っていました。そのあと、Media from FTP → Bulk Media Registerと乗り...

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

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

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

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

ebookbrain

WordPressで「最近のコメント」ウィジェットをカスタマイズするプラグイン比較、おすすめはどれ？ WordPressで「最近のコメント」ウィジェットをカスタマイズするプラグインをまとめていきます。わりとたくさんでていますね。 角丸のアバターにできる、Recent Comments Wi...

simplicity 2でSimple Author Boxを追加

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

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

ebookbrain

「Simple Author Box」の使い方・CSSのカスタマイズ | WordPressのプラグイン Simple Author Boxの使い方・CSSのカスタマイズの覚書を残しておきます。 プロフィールを表示するプラグインで重視するポイントとSimple Author Boxを採用した理由 プロフ...

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

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

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

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

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

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

ebookbrain

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応) Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。 公式サイトはこちらです。入会する場合はJoin to downloadです。 El...

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

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

ebookbrain

WordPressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利 Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。 style.cssやfunctions.phpだけではなく、header.phpやfooter.phpやsingle.phpもあると便利だと思...

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の仕様が左右からでるメニューになっていました。個人的にそれは気に入らずプラグインで固定にしました。

ebookbrain

WordPressでスマホのヘッダーメニューを固定するプラグインまとめ Wordpressのテンプレートはいまだスマホの固定のヘッダーメニューに対応していないものが多いです。 そのため、jqueryのsliderなどが有名で個人的にも利用していましたが、...

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

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>

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

参考：http://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に書いてあるんですね。

Simplicity

本文の最後にコードを追記したいのですが、どのファイルのどこにいれればいいのでしょうか？ Simplicityの特徴 › フォーラム › Simplicityについての質問 › 本文の最後にコードを追記したいのですが、どのファイルのどこにいれればいいのでし...

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

ebookbrain

404 NOT FOUND | ebookbrain

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の使い方はこちらの記事をみてください。

ebookbrain

safari(ios)で効かない!?linear-gradientの使い方(transparentの透明度、斜め、%指定、蛍光ペンのマーカー) css3のlinear-gradientを使うことにより、蛍光ペンのマーカーのような効果を作成できます。 linear-gradientの使い方 linear-gradientはもともとグラデーションの効果を作...

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