ワードプレスの小技

パーマリンク設定

カスタム構造に「/%postname%-%post_id%」を入れる。

目次作成

参考

目次のプラグイン。WordPressで初心者でも簡単に目次を挿入できるプラグインを紹介します。 | ウェブログアドバイザーTURKEY

TOC+のスタイルは

  1. プラグイン
  2. プラグイン編集
  3. 編集するプラグイン選択「TOC+」を選択
  4. screen.min.css

なぜかスタイルはminのほうが適応されている。

アイコンはこちらから

A.Dグラフィティ|HTML5 サンプル集 > アイコンフォント集

WordPressのバックアップ

【保存版】プラグインUpdraftPlusの設定と使い方【WordPressのバックアップ】 | いわきで子育て。しながらブログ。

もう一つ、あるみたいですが私はこちらのほうが使いやすいです。

サイトマップ作成プラグイン Yoast SEO

SEO対策に!Yoast SEOプラグインの基本設定の方法 | OPENCAGE

作成されない場合

WordPress SEO by Yoast サイトマップの 404 エラーへの対処方法 | Design Hack and Slash

行の高さを変えて文字がびっしりさせない

箇条書きリストを作るときにSimply2では若干、行間が狭い気がする。

こんな風に、

当サイトではわからない用語に赤アンダーラインを引いているので、

余計狭くて、醜くなってしまいます。

これまでも、「狭いな、醜いな」とは思っていたものの「まあいいか」と済ませていました。

ですが、ここまで見にくいとやはり何かやらねばと思うものです。

そこで、今回思っていたよりも簡単にできたのでその方法を紹介します。

Chromeを使っている場合は同じ方法でできます。

変更部分を調べる!

まずは、変更したい文章の上で右クリックをします。

すると下のようになるので、一番下の検証をクリックします。

すると、下のような画面になり、その文章で使っているスタイルがわかります。

見るところは、一番右の表示です。

ここに文字の表示スタイルが書いてあります。

で、今回は文字の高さを変更するので、

.article ol, .article ul, .article dl{

line-height:150%;

}

を変更することになります。

150%をクリックすると値を変更する事ができるので、

ちょうどいい値を模索してみましょう。

ここでどんな値にしても、変更が保存されるわけではないので安心してください。

もし、どこを変更していいか分からなかったら、適当に数値を変えてみましょう。

高さを変えたい場合は、どこかに高さが変わる数値があるので。

私の場合は190%がちょうどよかったのでこの値にしました。

 ⇛ 

まだ、変更が保存されていないので、ここからはワードプレスをいじっていきます。

変更を保存する

とはいっても、テンプレートをいじるのは少し、怖いし、アップデートがきたら消えてしまいます。

そこで、追加という方法をとってみました。

この方法ではテンプレートを編集するわけではないので、安心です。

表示がおかしくなったときも簡単に消すことができます。

では、ワードプレスのダッシュボードから「外観」の「カスタマイズ」をクリックしましょう。

すると、下の画像と皆さんのページが表示されます。

この一番下に「追加CSS」という項目があります。

ここで、変更した数値を保存できます。

ここをクリックすると、下のような画面になります。

ここに変更点を書いていきます。

これをを貼り付けます。

こんな風に、

もし変なところがあれば、下の画像のようにエラー警告と、赤☓がでるので、

出ないことを確認して右上の公開を押しましょう。

すると、変更が保存されて、いい感じの文字間隔に変更できました。

↓変更後

ちょっとした差かもしれませんが、気持ち悪いと思っているところがなくなることはいいことです。

応用編

もちろん、高さの変更だけでなく、あらゆるスタイルを変更することができます。

例えば、Simply2のデフォルトの見出しの装飾があまり気に入っていないのですが、

今回の方法でやればカスタマイズが簡単にできます。

いつか時間があったときにやってみようと思います。

記事ごとにCSSを適用したいときは?

Add Custom CSS を使いました。

簡単に記事ごとにCSSを設定できます!

他にもプラグインはいつくか似たものがありましたが、

これが簡単に使えました!

【WordPress】記事毎にCSSを適用できるプラグイン「Add Custom CSS」 | なるほど。

コードをわかりやすく表示したい!

WordPressでソースコードを表示するには「Gist」一択!プラグインでの埋め込みはもう古い! | らいふーる

プラグインを入れる必要がない方法。

簡単便利です。

上のリンクにやり方が載ってます。

しかし問題がありました!

セキュリティが厳しい会社からのアクセスではgitへのアクセスが制限されることがあります。そのため、Gistが表示されないということになります。

なので、Enlighterに乗り換えました!

とても使いやすく気に入っています。

用語集が作りたい!

新しいことを知ろうとすると山のように、知らない単語がでてきて、「あれ?これなんだっけ」と理解が一向に深まらなくて困っていました。

そこで、用語集を作ってみたのですが、使いづらいことこの上ない(泣)

探してみたらあるじゃないですか、良いのが^^

「CM Tooltip Glossary」

導入参考

用語集を作成するプラグイン「CM Tooltip Glossary」のインストールと設定上の大事なポイント | 食遊人

詳細設定

WordPress:用語集プラグイン「CM Tooltip Glossary」を日本語対応させる方法と各種設定内容

そしてできたページがこのページ

Glossary

そしてマウスを用語に合わせると吹き出しが出るようになりました。

[超初心者が行く] Angular5 Tutorialしてみた3

まあ、自分用の用語集として便利だと思ったので、

用語をハイライトさせて、吹き出しにしていくかはどうだろうか、

という感じです。

めんどくさいですからね。

コードを埋め込みたいときはpinetools

コードを埋め込みたい時の方法はいくつかありますが、

pinetoolsがおすすめです。

手順は画像を参考に

こんなパターンがあります。

pinetoolsで選べるスタイルパターン

Agate

void main() {
  runApp(UnitConverterApp());
}

Gruvbox Light

void main() {
  runApp(UnitConverterApp());
}

Darkula

void main() {
  runApp(UnitConverterApp());
}

Ir Black

void main() {
  runApp(UnitConverterApp());
}

Kimbie Dark

void main() {
  runApp(UnitConverterApp());
}

Kimbie Light

void main() {
  runApp(UnitConverterApp());
}

Monokai Sublime

void main() {
  runApp(UnitConverterApp());
}

Solarized Light

void main() {
  runApp(UnitConverterApp());
}

Sunburst

void main() {
  runApp(UnitConverterApp());
}

この倍以上あるので結構どれ使っていいか悩みどころですね〜

デメリットとしてはhtmlにスタイルをガンガン入れていくのでhtmlがめっちゃ膨れるところですかね〜

これまで使ってきたもの

これまで使ってきたものの失敗例も置いておきます。

gist

こんな感じでコードを表示することができます。

表示しているコードは適当です。

失敗した理由としては、こんなところ

  • githubアカウントとデータが紐ずいているためアカウントがなくなるとなくなる
  • 表示するたびにgithubから表示するコードを読み込むためいくつも埋め込むとちょっとおもいため、あまり埋め込めない
  • 表示デザインがあまり好きではない(好みのやつだけど超重要)
  • セキュリティ的にうるさい会社のPCから見るとjsが実行されず表示されない

だけど埋め込むのは超簡単だからこの辺に不満を感じないなら使ってもいいのでは?

EnlighterJS
Element.implement({
    /**
     * Highlights an element/Removes Element highlighting
     *
     * @param {Object, Boolean} [options] EnlighterJS options Object or Boolean value to enable/disable highlighting
     * @returns {Element} The current Element instance.
     */
    enlight: function(options){
        // mixed input check - options available ?
        options = (typeof(options) == "undefined") ? {} : options;
        // convert "true" to empty Object!
        options = (options===true) ? {} : options;
        // enlighter instance already available ?
        var enlighter = this.retrieve('EnlighterInstance');
        // hide highlighted sourcecode ?
        if (options === false){
            if (enlighter !== null) {
                enlighter.enlight(false);
            }
        // highlight sourcecode and use options
        }else{
            // create new enlighter instance
            if (enlighter === null) {
                enlighter = new EJS(this, options, null);
                this.store('EnlighterInstance', enlighter);
            }
            enlighter.enlight(options);
        }
        // element instance
        return this;
    },
});

こんな感じでコードを表示することができます。

これはWordPress Pluginです。

表示しているコードは公式から。

失敗した理由としては、こんなところ

表示が好かん!!!!

あと、Dartをサポートしていないというところです。

Flutter記事を書く上では結構ストレスになっていました。

だけど、結構使い勝手もよく、好みのスタイリングを当てることができます。

表示が好かんのもおそらくカスタマイズ次第でなんとかできるでしょう!

他にもシンタックスハイライトのプラグインはいくつかありますが、これが一番おすすめです。

でも、pinetoolsで試しに作ったもののクオリティを見てしまうともうのりかえるしかないですね〜

折りたたみができるアコーディオンは簡単に作れる!

参考:

jQueryをWordPressで使う場合の読み込み方と使い方 | WordPress | プライマリーテキスト
Simple jQuery Examples with Code and Demos – Tania Rascia

<script type="text/javascript">
jQuery(document).ready(function($){
 $(".accordion").on("click", ".accordion-header", function() {
    $(this).toggleClass("active").next().slideToggle();
 });
});
</script>

これを本文中に普通に貼り付けて、

<div class="accordion">
    <div class="accordion-header">見出し</div>
    <div class="accordion-content">隠し要素</div>
</div>

これも貼り付ければOK

あとはcssも

(Add Custom CSS というプラグインを入れれば簡単にcssを適用できます)

.accordion {
    background: linear-gradient(to bottom right, white, #F8F8F8);
    max-width: 400px;
    background: white;
    margin: 0 auto;
  box-shadow: 0 15px 20px -15px rgba(0, 0, 0, 0.3), 0 35px 50px -25px rgba(0, 0, 0, 0.3), 0 85px 60px -25px rgba(0, 0, 0, 0.1);
}

.accordion-header {
    border-bottom: 1px solid #DDE0E7;
    color: #2a313a;
    cursor: pointer;
    font-weight: 700;
    padding: 1.5rem;
}

.accordion-header:hover {
    background: #F6F7F9;
}

.accordion-content {
    display: none;
    border-bottom: 1px solid #DDE0E7;
    background: #F6F7F9;
    padding: 1.5rem;
    color: #4a5666;
}

.accordion-header::before {
    content: '';
    vertical-align: middle;
    display: inline-block;
    width: .75rem;
    height: .75rem;
    border-radius: 50%;
    background-color: #B1B5BE;
    margin-right: .75rem;
}

.active.accordion-header::before {
    background-color: #FC6468;
}

こんな感じになります。

見出し
隠し要素

お好みでcssは変えてみてはいかがでしょうか〜

シェアする

  • このエントリーをはてなブックマークに追加

フォローする