WordPressあれこれプラグイン集

プラグイン集

WordPressの記事に「目次」をつくる　→ Table of Contents Plus

画像が横になる　→ Image Rotation Repair

簡単に使えるスライドショー　→ スライダー　Meta Slider

カテゴリーの表示順を並び替える　→ Category Order and Taxonomy Terms Order　

WordPress　Popular Posts人気の記事　→ 　

カテゴリーをツリービューに →　WP-dTree

自動的に目次を生成する　→　 Table of Contents Plus　　

サムネイル付きの最新投稿ウィジェット　→ Newpost Catch

faebookと連携　　→ jetpack
(WordPressの新着記事をFacebookに自動投稿する←今はできません。2020.1）

PDFを埋め込む　→ PDF Embedder

画像サイズを自動的にリサイズ　→ Imsanity

携帯アプリmiilからWordPressに　→ AddQuickTag

吹き出しを挿入する　→ LIQUID BLOCKS

画像を横並びにする　→ Shortcodes by Angie Makes
（カラムを使ったり、画像ギャラリーを使うことも可能です）
　→ Shortcorder

ブロックではなく、一部だけ文字だけを変える　→　TinyMCE Advanced

WordPress STINGER PLUS2 記事一覧をリスト表示からタイル表示に変更する

プラグイン　SEO・グーグル関係

SEO対策　→ All in One SEO Pack・Yoast SEO

Google XML Sitemaps 併用するとダメなので外す

検索が表示されない　→ Googleサーチコンソール

検索が表示されない　→ Google XML Sitemap

その他

Code Snippets

function hook_widget_categories( $args ){
$args['hide_empty'] = 0;
return $args;
}
add_filter( 'widget_categories_args', 'hook_widget_categories');
add_filter( 'widget_categories_dropdown_args', 'hook_widget_categories' );

開閉できるアコーディオンをつける

ＨＴＭＬ
記事に

<div class="cp_linetab"><input id="tab-1" name="tabs" type="checkbox" /><label for="tab-1">タイトル</label>
<div class="cp_linetab-content">
<p>テキスト</p>
</div>
</div>
<div class="cp_linetab"><input id="tab-2" name="tabs" type="checkbox" /> <label for="tab-2">タイトル</label>
<div class="cp_linetab-content">
<p>テキスト</p>
</div>
</div>

追加ＣＳＳに

.cp_linetab {
position: relative;
overflow: hidden;
width: 49%;
margin: 0 3px;
color: #fff;
float:left;
}
.cp_linetab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_linetab label {
font-weight: bold;
line-height: 3;
position: relative;
display: block;
padding: 0 0 0 1em;
cursor: pointer;
margin: 0 0 1px 0;
background: #53d1bd;
border-radius:5px;
}
.cp_linetab .cp_linetab-content {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
color: #333333;
background: #eaeaea;
}
.cp_linetab .cp_linetab-content p {
margin: 1em;
font-size: 14px;
}
.cp_linetab p{
margin-bottom:0px;
}

.cp_linetab input:checked ~ .cp_linetab-content {
max-height: 20em;
}

.cp_linetab label:after{
color: #fff;
font-family:"FontAwesome";
content:" \f078";
position: absolute;
top: 0;
right: 0;
width: 2em;
height: 3em;
}

.cp_linetab input:checked ~ label::after {
color: #fff;
font-family:"FontAwesome";
content:" \f077";
}

ナビゲーションメニュー

ナビの字の上に空間をもたせる

文字の上の空間
header .smanone ul.menu li a{
display:block;
font-size: 13px;
overflow:hidden;
width:100%;
height:100%;
line-height:40px;
padding-top:5px;/*追加　文字の上に空間*/
color:#000;
text-decoration:none;
position:relative;
z-index:1;
}

/*グローバルメニューの固定化・装飾
--------------------------------*/
#st-menubox {

height:40px;

◆

</div>
</div>
</div>
<?php get_template_part( 'st-header-image' ); //カスタムヘッダー画像 ?>
<div id="header-l">
<?php get_template_part( 'st-header-logo' ); //サイト名とディスクリプション ?>
</div>

</header>

ナビゲーション幅

header .smanone ul.menu li{を変更する

header .smanone ul.menu li{
box-sizing: border-box;
list-style-type:none;
float:left;
width:115px;　（width:160px;）

ナビを上部に固定する

　　https://www.d-3.site/entry/2017/11/23/060000

/*グローバルメニューの固定化・装飾
--------------------------------*/
#st-menubox {
background: #333; /*メニューバーの色*/
position: fixed; /*メニューを上部に固定する記述*/
width: 100%; /*メニューの幅を画面いっぱいに*/
z-index: 999;
}

header .smanone ul.menu li {
transition: 0.5s;
}

header .smanone ul.menu li:hover {
background: #1db2f5 ; /*メニューバーマウスオーバー時の色*/
}

header .smanone ul.menu li a{
font-size: 18px !important; /*メニューのフォントサイズ*/
font-weight: bold; /*メニューのフォントを太字に*/
color: #FFF !important; /*メニューのフォント色*/
}

header .smanone ul.menu li li a{
background: rgba(51, 51, 51, 0.91) !important; /*サブメニューの背景 ※少し透過してます*/
border-top: none !important;
transition: 0.5s;
}

header .smanone ul.menu li li a:hover {
background: #1db2f5 !important; /*メニューバーマウスオーバー時の色*/
}

nav.smanone {
margin-top: -10px !important; /*メニュー上部の余白調整表示崩れるようならこのコードは追記しないでOK*/
}

@media only screen and (min-width: 960px) {
#st-header {
padding-top: 45px; /*ヘッダー画像にメニューが被さらないように調整しています表示崩れるようなら追記なしでOK*/
}
}
/*ここまで*/

トップ画像

トップ画像をスライド

STINGER PLUS2のヘッダーをオシャレに！タイトル部分を非表示にして画面幅いっぱいのヘッダー画像だけを表示する

参考；https://www.d-3.site/entry/2017/11/22/060000　

以下のCSSをstyle.cssに追記する

WordPressの管理画面から外観→テーマの編集で
/*ヘッダー部分を非表示にするCSS
--------------------------------*/
#headbox-bg{
display: none !important;
}
/*ここまで*/

/*ヘッダー画像を画面幅いっぱいにするCSS
--------------------------------*/
#st-header {
max-width: none !important;
}
/*ここまで*/

ブログタイトル

/*ブログタイトル*/
header .sitename {
font-size: 22px;
color: #fff;
line-height: 30px;
font-family: 'Oswald', sans-serif;
padding: 10px 0 0;
margin-bottom: 10px;
}

◆タイトル

#header-l {
padding-top:0;
}

#header-l{
margin-top: -15px;
margin-bottom: 15px;

STINGER PLUS2: スタイルシート (style.css)

/*-------------------------------------
LP
--------------------------------------*/

.lp header,
.lp #gazou,
.lp #itiran,
.lp .kanren,
.lp #breadcrumb,
.lp nav, .lp .blogbox,
.lp .tagst, .lp .point,
.lp .p-navi,
.lp .pagination,
.lp .n-entry-t,.lp .st-pagelink {
display: none;
}

//display: none;

◆topへメニュー