プラグイン | hgrs's Blog / 文字好きエンジニアの技術メモ Sat, 18 May 2019 21:08:02 +0000 ja hourly 1 https://wordpress.org/?v=6.3.1 /wp-content/uploads/2019/05/cropped-port_512-32x32.png プラグイン | hgrs's Blog / 32 32 WordPressの記事上にアイキャッチをJavaScriptで自動挿入する /archives/207.html /archives/207.html#respond Sun, 19 May 2019 01:12:35 +0000 /?p=207 はじめに

僕の使ってるテーマNishikiでは投稿ページにアイキャッチが表示されません。なので記事の上にアイキャッチが表示されるように変更してみました、JavaScriptで。PHPじゃなくて、JavaScriptで。

なんでJavaScript？

WordPressといえばPHPですよね。確かに、アイキャッチの追加はテーマのPHPをいじれば追加することができます。

でも僕はまだブログを始めたばかりで、今後テーマを変えてしまうかもしれないので、あまりテーマに依存した書き方をしたくなかったのです。

そのため、別の方法で追加する必要がありました。そこで記事の上下にHTMLを挿入できるプラグインを使用して実現しました。

HTMLが書けるということは<script></script>タグを利用してJavaScriptが書けます。なのでJavaScriptで実現しています。

事前準備

記事の上下にHTMLを追加するプラグインを入れます。

PRyC WP: Add custom content to post and page (top/bottom)

追加コードの記入

プラグインの設定から記事上のコードに以下のコードを書き加えます（操作は図を参照）。

注意点としては、一行目の<img>タグのsrcは自分の好きな読み込み中の画像を設定しましょう。

<img name="top_ogp_image" src="https://example.com/path/to/loading.png">
<script type="text/javascript">
    var metas = document.head.children;
    for(var i=0; i<metas.length; i++){
        var property = metas[i].getAttribute('property');
        if(property === 'og:image'){
            var imagePath = metas[i].getAttribute('content');
            document.top_ogp_image.src = imagePath;
        }
    }
</script>

JavaScriptのアイキャッチ

仕組みの解説

JavaScriptからDOMを使用し、<meata>タグに設定されているOGP画像を読み取ってきます。

ただ特定の<meta>タグを一発で取ってくることができないため、まずdocument.head.childrenを利用し、<head></head>の全ての子要素を取ってきます。そこからOGP画像（propertyがog:imageになっているもの）を抜き出します。

そしてOGP画像で読み込んでいる画像をあらかじめ用意した<img>タグのsrcとして割り当てます。

こうすることで、JavaScriptを使ってアイキャッチ画像の自動挿入を実現できます。

メリット

テーマに依存しない

さっきも書きましたね。テーマを変えたりした時にわざわざ移行の必要がありません。単純に記事上下にHTMLを書き加えるプラグインなのでカスタマイズ性も高いです。

一括管理ができる

例えば「やっぱりアイキャッチ消そ」「表示サイズ/場所を変えよ」といったことが一括で操作できます。まあ、これはPHPでも同じですが…

ただ、このプラグインではIDを指定することで特定の記事には表示しないといった指定ができるのは良い点ですね。

デメリット

読み込みが発生する

JavaScriptで書いているので、クライアントサイド（ブラウザ）で画像の割り当てが実行されます。そのため、サーバサイドのPHPと違って、ページを読み込んだ後に画像を探すので、タイムラグが生じます。このタイムラグが画像読み込みの遅延の原因です。

おわりに

ちょっと特殊な方法でアイキャッチを指定しましたが、自由度が高いので良いですね。いつ表示を消すかわかりませんが笑。

ほんとはPHPが嫌いなので書きたくなかっただけ。

]]> /archives/207.html/feed 0 WordPressに入れたプラグインの紹介 /archives/53.html /archives/53.html#respond Mon, 29 Apr 2019 15:39:20 +0000 /?p=53 はじめに

WordPressを使い始めたばかりなので、手探りですが、自分なりに良さそうなプラグインを入れたので、紹介していきたいと思います。

プラグイン一覧

Really Simple SSL

常時SSL化するためのプラグインです。httpなんて忘れて、httpsにしましょう。

プラグイン自体は特に設定などもなく、有効化し使用すると常時SSL化できます。シンプルでいいですね。

WP Githuber MD

記事をMarkdownで書くためのプラグインです。こちらは個別で記事を書いたので、詳細はこちらを。

1番入れてよかったと思ってるプラグインです。

WP User Avatar

ユーザアイコンを設定するためのプラグインです。特にこれにした理由はありませんが、検索の上の方に出てきたので使いました。別に困ってません。

All In One SEO Pack

SEO対策のためのプラグインです。僕の使ってるテーマはOGPをいい感じに設定してくれなかったり、Googleアナリティクスを使いたかったりしたので、入れました。

PRyC WP: Add custom content to post and page (top/bottom)

記事の上下に定型文（HTML, Javascript）を埋め込むことができるプラグインです。僕の使っているテーマは良い感じに記事のページでアイキャッチが表示されないので、こちらを使い無理やり実装しました。

WordPress Popular Posts

サイドバーに「人気記事」を追加したかったのでこのプラグインを導入しました。人気の集計はプラグインを導入後から計測されるので注意です。

Q2W3 Fixed Widget for WordPress

サイドバーを固定したかったのでこれを入れました。PCの人はわかると思いますが、サイドバーが一定のところでスクロールをやめてくれます。

Head, Footer and Post Injections

HTMLの<head></head>に要素を書き加えられます。また<body></body>の直後/直前にもコードを書き加えられますがその機能は使ってません。

【番外編】カスタムテーマ: Nishiki

プラグインではないですが、使用しているカスタムテーマです。正直あまり気に入ってはいませんが、しっくりくるものを見つける/作るまではこれを使っていこうと思います。

おわりに

なんかオススメのプラグイン/テーマがあったら教えてください。

]]> /archives/53.html/feed 0 WP Githuber MDでいい感じにWordPressでMarkdownを使う /archives/36.html /archives/36.html#respond Mon, 29 Apr 2019 14:04:13 +0000 /?p=36 はじめに

この記事を書くのに使われているのがWP Githuber MDです。名前からしてわかるように、GitHubでのMarkdownを再現した感じのプラグインです。

編集画面はこんな感じです。
編集画面

使いやすさ

普段からMarkdownを書くことがある人は、特に迷うことなく使えるし、すごくいい感じです。

しかも、追加モジュールとして、コードのシンタックスハイライト（Prism.js）を設定できたり、TeX（KaTeX）が使えたりします。

シンタックスハイライト例

from fontParts.world import OpenFont

def open_font(path):
    font = OpenFont(path)
    return font

test_font = open_font('test.otf')

Tex例
B > \frac{1}{n} {\sum \limits ^{n}_{i=1}}x_i

おわりに

普通に使いやすいので、これからの記事は、このプラグインを使って書こうと思います。

]]> /archives/36.html/feed 0