ブログ・アフィリエイト・プログラミングを愛する「マナブログ(manablog)」筆者のマナブさんが制作された『Minimal』のカスタマイズコード・豆知識などの備忘録です。

ほぼ個人用ですが、コードはコピペOKなので必要であればお使いくださいませ。

(当ブログは現在Bloggerサービスを利用しています。)

WordPressテーマ『Minimal』カスタマイズ備忘録

ドロップダウンメニュー追加用

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> ドロップダウン<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="URL">あ</a></li>
<li><a href="URL">い</></li>
<li><a href="URL">う</a></li>
</ul>
</li>

シェアボタン(はてなブックマーク、Google+、LINEに送る)追加

sns.phpの所定の位置に追記

 <li class="hatebu-btn-icon col-xs-2">
<a class="hatena-btn-icon-link" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
<span class="icon-hatebu"></span>
<span class="sns-share-small_text">hatebu</span>
</a>
</li>
<li class="google-plus-btn-icon col-xs-2">
<a class="google-plus-btn-icon-link" href="https://plus.google.com/share?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
<span class="icon-google-plus"></span>
<span class="sns-share-small_text">Share</span>
</a>
</li>
<li class="line-btn-icon col-xs-2">
<a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink(); ?>" class="line-btn-icon-link" target="_blank">
<i class="fab fa-line"></i>
<span class="sns-share-small_text">LINEで送る</span>

style.cssの所定の位置に追記

ul.sns_button .hatebu-btn-icon {
background: #0075DD; }
ul.sns_button .google-plus-btn-icon {
background: #D73220; }

PC/スマホ表示切り替え

PCのみ表示:class="sp-none"を付与
スマホのみ表示:class="pc-none"を付与

サイドバープロフィール

<div class="col-xs-12 author">
<img src=アイコン画像URL" class="img-responsive img-circle">
<h4>なまえ</h4>
<hr>
<p>プロフ文</p>
<a href="URL" class="pull-right"><i class="fa fa-angle-right"></i>ページ名 </a>
<br />
</div>

Font Awesomeにつけるおまじないコード

<i class="コード" aria-hidden="true"></i>

参考記事:「aria-hidden="true"」と「speak: none;」

YouTube読み込み高速化

動画<iframe>内の「src="~"」→「src="" data-src="~"」

※初期導入の方法
参考記事:【WordPress】Youtubeの多い記事をプラグインなしで高速化する方法

要約文phpエラーが出た時

該当するラインの「_aioseop_description」→「'_aioseop_description'」

プラグインなし高速化

参考記事:プラグインなしでWordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】

※jQueryに関しては初期状態で導入済み?バージョン引き上げは自分で行う
※読み込み順が決まっているscriptは「async」ではなく「defer」を使う

manablog『Minimal』紹介ページ

≫ミニマリスト向けのWordPressテーマ『Minimal』を作りました

ミニマリスト向けWordPressテーマ『Minimal』カスタマイズ備忘録【マナブログ】

ブログ・アフィリエイト・プログラミングを愛する「マナブログ(manablog)」筆者のマナブさんが制作された『Minimal』のカスタマイズコード・豆知識などの備忘録です。

ほぼ個人用ですが、コードはコピペOKなので必要であればお使いくださいませ。

(当ブログは現在Bloggerサービスを利用しています。)

WordPressテーマ『Minimal』カスタマイズ備忘録

ドロップダウンメニュー追加用

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> ドロップダウン<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="URL">あ</a></li>
<li><a href="URL">い</></li>
<li><a href="URL">う</a></li>
</ul>
</li>

シェアボタン(はてなブックマーク、Google+、LINEに送る)追加

sns.phpの所定の位置に追記

 <li class="hatebu-btn-icon col-xs-2">
<a class="hatena-btn-icon-link" href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
<span class="icon-hatebu"></span>
<span class="sns-share-small_text">hatebu</span>
</a>
</li>
<li class="google-plus-btn-icon col-xs-2">
<a class="google-plus-btn-icon-link" href="https://plus.google.com/share?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" target="_blank">
<span class="icon-google-plus"></span>
<span class="sns-share-small_text">Share</span>
</a>
</li>
<li class="line-btn-icon col-xs-2">
<a href="https://timeline.line.me/social-plugin/share?url=<?php the_permalink(); ?>" class="line-btn-icon-link" target="_blank">
<i class="fab fa-line"></i>
<span class="sns-share-small_text">LINEで送る</span>

style.cssの所定の位置に追記

ul.sns_button .hatebu-btn-icon {
background: #0075DD; }
ul.sns_button .google-plus-btn-icon {
background: #D73220; }

PC/スマホ表示切り替え

PCのみ表示:class="sp-none"を付与
スマホのみ表示:class="pc-none"を付与

サイドバープロフィール

<div class="col-xs-12 author">
<img src=アイコン画像URL" class="img-responsive img-circle">
<h4>なまえ</h4>
<hr>
<p>プロフ文</p>
<a href="URL" class="pull-right"><i class="fa fa-angle-right"></i>ページ名 </a>
<br />
</div>

Font Awesomeにつけるおまじないコード

<i class="コード" aria-hidden="true"></i>

参考記事:「aria-hidden="true"」と「speak: none;」

YouTube読み込み高速化

動画<iframe>内の「src="~"」→「src="" data-src="~"」

※初期導入の方法
参考記事:【WordPress】Youtubeの多い記事をプラグインなしで高速化する方法

要約文phpエラーが出た時

該当するラインの「_aioseop_description」→「'_aioseop_description'」

プラグインなし高速化

参考記事:プラグインなしでWordPressサイトを高速化する方法【JS・CSS・キャッシュ設定】

※jQueryに関しては初期状態で導入済み?バージョン引き上げは自分で行う
※読み込み順が決まっているscriptは「async」ではなく「defer」を使う

manablog『Minimal』紹介ページ

≫ミニマリスト向けのWordPressテーマ『Minimal』を作りました

次に読まれている記事