ストークのショートコード追加(あわせて読みたい)

今回はwordpressテーマ「ストーク」のショートコードを追加して超簡単におしゃれなリンクを作れるようにします。

こんなのを作ります。

 

ちなみにアルバトロスやハミングバードでもできます。

 

記事に挿入したい場合はこんなショートコードをペタッとするだけなので超簡単です。

 

ストークをカスタマイズする経緯

軽く経緯を説明。

 

記事中に挿入するリンクをもうちょっとオシャレにしたい。

どうしてもオシャレにしたい!

 

だってこうやってリンクを貼るだけだと味気ないよね。

【好きなこと・やりたいことを仕事にする方法】集客も画期的も無用!

 

もちろんwordpressテーマ「ストーク」を使っていればショートコードを使って

[kanren2 postid=”220″]

こんなのも用意できるんだけど、別のパターンが欲しい。

 

なにかオシャレなのはないか探し回った。

どこにいるんだ。

 

 

ストークカスタマイズ-あわせて読みたいリンクを作ってみる

そしてこちらの記事「はてなブログの動く記事リンク作ったよ!【ブログカスタマイズ】」と出会った。

こちらの記事で紹介しているのははてなブログに先程の「あわせて読みたいリンク」を挿入する方法だった。

これをwordpressで使えるようにしよう。

 

あわせて読みたい

home

 

できた!

でも重大な欠点があった。

 

 

ストークカスタマイズ-テキストエディタは触りたくない

まずテキストエディタに貼らないといけない。

こういうの!

 

ぼくは基本テキストエディタは触るべきじゃないと思っている。

テキストエディタは見にくいから挿入しにくいというのもあるんだけど1番の理由は置換ができないから。

 

記事毎にテキストエディタで挿入していると内容を変えたい時にすべての記事を1つ1つ変更しないといけない。

例えば、「あわせて読みたい」の部分を「関連記事」に変更したい場合とかね。あとはデザイン変えたい場合とか。

 

ちなみに置換は「Search Regex」というプラグインを使ってます。

 

それからビジュアルエディタではこんなふうに表示される。

ストークカスタマイズ-ビジュアルエディタの表示

これも気にくわない。

 

 

ストークカスタマイズ-ショートコード化

というわけでショートコード化してしまえば全て解決できるじゃないか!っと思ったわけです。

 

まず下準備からやっていきましょう。

 

style.cssに追記

 

header.phpに追記

 

 

ここまでやった時点でテキストエディタにさっきの

これを貼ればとりあえず使えるようにはなります。

 

実はここまではテーマがストークじゃなくても使えます。

せっかくストークやアルバトロス、ハミングバードを使ってるならショートコード化してしまうのがオススメ!

 

ショートコードの作成準備

ストークのテーマフォルダーの中には「library」というフォルダーがあります。

 

子テーマを使っていると思うので子テーマの中に「library」というフォルダーを作りたいんですけど、このフォルダー名を親テーマのと同じにしてしまうとエラーが出てしまうので少しだけ変えます。

ぼくは「library_child」としました。

 

新しく作ったフォルダの中に「shortcode.php」を作ってください。

ぼくの場合は【/themes/子テーマ名/library_child/shortcode.php】こんな構成になりました。

ファイル構成

 

shortcode.php作成

ペタッと貼り付けてやってください。

 

functions.phpに追記

くれぐれも先に「shortcode.php」を作ってくださいね。作っていないとエラーが出ます。

 

これでショートコードが使えるようになります!

 

エラーが出る場合

※ここでエラーが出る場合はshortcode.phpの読み込みに失敗しているということなので、ファイルの名前、指定しているパスが間違っていないかの確認をしてみてください。

 

ストークカスタマイズ-ショートコードを試す

ショートコードは「AddQuicktag」プラグインを使うと簡単に挿入できるようになるのでおすすめです!

 

共通部分として「head」に好きな文字を入れることができます。

毎回変えるつもりがないなら「AddQuicktag」への登録時に決めてあるものをいれておけばOKです。

 

リンクとテキスト指定バージョン

あわせて読みたい

オススメ

「link」にURL、「text」に文字を入れれば任意の文字でリンクを作ることができます。

内部リンクとしても使えるんですけど、外部サイトへのリンクを作る際におすすめです。

 

※それから、固定ページにリンクしたい場合もこちらを使ってください。(固定ページのID指定ができないので)

 

ID指定バージョン

「postid」に記事のIDを入れるだけで文字とURLを自動で取ってきてくれます。

記事タイトルを変えたりしたときにもこちらは書き換えずにすみます。

IDを入れなかった場合

IDを入れなかった場合は最新の記事を3つ表示します。

 

ID指定バージョン(複数)

複数表示にも対応させました。

とはいえ、通常版に記事のidを複数入れてるだけなので「AddQuicktag」への登録は通常版だけ登録すればいいかなと思います。

 

 

色の変え方

2017/4/8に簡単に色を変えられるように更新しました。

style.cssとshortcode.phpを上書きすれば変えれるようになります。

現在対応の色は

  • ピンク
  • 黄色

の4パターン。

 

ショートコードに「color」の要素が増えたので「AddQuicktag」に登録している人は書き換えておくと便利です。

 

 

おつかれさまでした!

 

 

 



スポンサーリンク


HOME

PROFILE

オススメ

トップへ