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

シェアする

wordpress001

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

海外のWordpressのテーマもおすすめ

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

Elegant Themes(エレガントテーマ)の評判・評価(日本語対応)
Elegant Themesという海外の有名なテーマがあります。購入しましたので、評判をレビューしていきます。 公式サイトはこちら...
Wordpressの人気おすすめ有料テーマ7選(クリエイター別に解説) レスポンシブ商用テンプレート
海外のWordpressの人気テーマを紹介します。 やっぱり、Webデザイナーごとにだいたい特色が決まっているため、 最近、Webクリエ...
スポンサーリンク

電子書籍のおすすめ比較

simplicityの子テーマ

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

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

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

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

【応用編】Wordpressで記事中H2の手前にアドセンス/広告を入れるカスタマイズ全まとめ
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 // この値を変更すると追従前(デフォルト)の座標が変わる
        });
      };

simplicity2の全部の記事で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プラグインまとめ
Facebookの個別ページのいいね数ではなく、Facebookページのトータルのいいねを増やすプラグインやテーマについてまとめてみます。こ...

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

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

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

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

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

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

simplicity2のアイキャッチの表示

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

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

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

simplicity2の初期のサムネイズサイズ

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に乗り換える《Wordpressのプラグインの使い方》
FTPからアップロードした画像をメディアライブラリに登録するにあたり、時々、Flash Uploaderを使っていました。 アイキャッチ画...

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

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

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

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

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

simplicity2でSimple Author Boxを追加

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

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

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

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

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

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

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

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

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

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

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

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

Wordpressの子テーマの作り方〜header.phpやfooter.phpやsingle.phpもあると便利
Wordpressの子テーマの作成方法をまとめておきます。覚書をかねています。 style.cssやfunctions.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:ヘッダー > グローバルナビを横幅いっぱいにする

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

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

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

簡単にスマホのヘッダーメニューを固定するWordpressのプラグインまとめ
Wordpressのテンプレートはいまだスマホの固定のヘッダーメニューに対応していないものが多いです。 そのため、jqueryのslide...

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

simplicity2でスマホのメニュを消す

mobile.cssに追加します。

#mobile-menu {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

参考:http://ebookbrain.net/

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

スポンサーリンク

シェアする

フォローする

スポンサーリンク