ストークのショートコード追加（あわせて読みたい）
今回はwordpressテーマ「ストーク」のショートコードを追加して超簡単におしゃれなリンクを作れるようにします。
あわせて読みたい
こんなのを作ります。
ちなみにアルバトロスやハミングバードでもできます。
1 | [relationId postid="220" head="あわせて読みたい"] |
記事に挿入したい場合はこんなショートコードをペタッとするだけなので超簡単です。
目次
ストークをカスタマイズする経緯
軽く経緯を説明。
記事中に挿入するリンクをもうちょっとオシャレにしたい。
どうしてもオシャレにしたい！
だってこうやってリンクを貼るだけだと味気ないよね。
【好きなこと・やりたいことを仕事にする方法】集客も画期的も無用！
もちろんwordpressテーマ「ストーク」を使っていればショートコードを使って
[kanren2 postid=”220″]こんなのも用意できるんだけど、別のパターンが欲しい。
なにかオシャレなのはないか探し回った。
どこにいるんだ。
ストークカスタマイズ-あわせて読みたいリンクを作ってみる
そしてこちらの記事「はてなブログの動く記事リンク作ったよ！【ブログカスタマイズ】」と出会った。
こちらの記事で紹介しているのははてなブログに先程の「あわせて読みたいリンク」を挿入する方法だった。
これをwordpressで使えるようにしよう。
あわせて読みたい
できた！
でも重大な欠点があった。
ストークカスタマイズ-テキストエディタは触りたくない
まずテキストエディタに貼らないといけない。
1 2 | <p class="relation-head">あわせて読みたい</p> <p class="margin-clear"><a class="relation-link">home</a></p> |
こういうの！
ぼくは基本テキストエディタは触るべきじゃないと思っている。
テキストエディタは見にくいから挿入しにくいというのもあるんだけど１番の理由は置換ができないから。
記事毎にテキストエディタで挿入していると内容を変えたい時にすべての記事を１つ１つ変更しないといけない。
例えば、「あわせて読みたい」の部分を「関連記事」に変更したい場合とかね。あとはデザイン変えたい場合とか。
ちなみに置換は「Search Regex」というプラグインを使ってます。
それからビジュアルエディタではこんなふうに表示される。
これも気にくわない。
ストークカスタマイズ-ショートコード化
というわけでショートコード化してしまえば全て解決できるじゃないか！っと思ったわけです。
まず下準備からやっていきましょう。
style.cssに追記
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | リンク記事枠 ========================================================================== */ /*---relation---*/ .entry-content .margin-clear { margin: 0; } .entry-content .relation-head { display: inline-block; padding: 5px 10px 2px; margin-bottom: 0; font-size: 18px; font-weight: bold; background-color: #ea4747; color: #fff; border-radius: 4px 4px 0 0; } .entry-content .relation-link { display: block; height: auto; /*color: #1464b3;*/ text-decoration: underline; border: solid 2px #ea4747; background-color: rgba(255,254,242,0.5); border-radius: 0 4px 4px 4px; padding: 20px; margin: 0 auto 20px; font-size: 18px; } .entry-content .relation-link:before { content: "\f0a9"; padding-right: 10px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; animation: horizontal 3s ease infinite; -webkit-animation: horizontal 3s ease infinite; } .entry-content .relation-link-id { display: block; height: auto; text-decoration: underline; border: solid 2px #ea4747; background-color: rgba(255,254,242,0.5); border-radius: 0 4px 4px 4px; padding: 20px; margin: 0 auto 20px; font-size: 18px; } .entry-content .relation-link-id-link:before { line-height: 1 !important; content: "\f0a9"; padding-right: 10px; display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; animation: horizontal 3s ease infinite; -webkit-animation: horizontal 3s ease infinite; } /** 2017/4/8追記 */ /**======= 色の指定はこちら ========*/ /** color=green */ .entry-content .relation-green .relation-head { background-color: #44cc55; } .entry-content .relation-green .relation-link { border: solid 2px #44cc55; } .entry-content .relation-green .relation-link-id { border: solid 2px #44cc55; } /** color=yellow */ .entry-content .relation-yellow .relation-head { background-color: #f9c31f; } .entry-content .relation-yellow .relation-link { border: solid 2px #f9c31f; } .entry-content .relation-yellow .relation-link-id { border: solid 2px #f9c31f; } /** color=black */ .entry-content .relation-black .relation-head { background-color: #666; } .entry-content .relation-black .relation-link { border: solid 2px #666; } .entry-content .relation-black .relation-link-id { border: solid 2px #666; } /** color=pink */ .entry-content .relation-pink .relation-head { background-color: #ff498a; } .entry-content .relation-pink .relation-link { border: solid 2px #ff498a; } .entry-content .relation-pink .relation-link-id { border: solid 2px #ff498a; } |
header.phpに追記
1 2 | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.8/font-awesome-animation.min.css' type='text/css' media='all' /> |
ここまでやった時点でテキストエディタにさっきの
1 2 | <p class="relation-head">あわせて読みたい</p> <p class="margin-clear"><a class="relation-link">home</a></p> |
これを貼ればとりあえず使えるようにはなります。
実はここまではテーマがストークじゃなくても使えます。
せっかくストークやアルバトロス、ハミングバードを使ってるならショートコード化してしまうのがオススメ！
ショートコードの作成準備
ストークのテーマフォルダーの中には「library」というフォルダーがあります。
子テーマを使っていると思うので子テーマの中に「library」というフォルダーを作りたいんですけど、このフォルダー名を親テーマのと同じにしてしまうとエラーが出てしまうので少しだけ変えます。
ぼくは「library_child」としました。
新しく作ったフォルダの中に「shortcode.php」を作ってください。
ぼくの場合は【/themes/子テーマ名/library_child/shortcode.php】こんな構成になりました。
shortcode.php作成
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <?php //関連記事 function relationFunc( $atts, $content = null ) { extract( shortcode_atts( array( 'head' => '', 'link' => '', 'text' => '', 'color' => '' ), $atts ) ); return '<div class="relation-'. $color .'"><p class="relation-head">' . $head .'</p><p class="margin-clear"><a class="relation-link" href="' . $link . '">' . $text . '</a></p></div>'; } add_shortcode('relation', 'relationFunc'); //関連記事(記事IDver) function relationIdFunc( $atts, $content = null ) { extract(shortcode_atts(array( 'y' => null,'m' => null,'d' => null, 'numberposts' => 5,'offset' => null,'order' => 'DESC','orderby' => 'post_date','meta_key' => null, 'postid' => null,'exclude' => null, 'head' => null,'color' => '' ),$atts)); $post = get_posts('post_status=publish&numberposts='.$numberposts.'&offset='.$offset.'&order='.$order.'&orderby='.$orderby.'&include='.$postid.'&year='.$y.'&monthnum='.$m.'&day='.$d.'&exclude='.get_the_ID().','.$exclude.'&meta_key='.$meta_key.$mode); foreach ($post as $item){ $echo .= '<a class="relation-link-id-link" href="' . get_permalink($item->ID) . '">' . $item->post_title . '</a><br>'; } return '<div class="relation-'. $color .'"><p class="relation-head">'. $head .'</p><p class="margin-clear"><span class="relation-link-id">'. $echo .'</span></p></div>'; } add_shortcode('relationId', 'relationIdFunc'); |
ペタッと貼り付けてやってください。
functions.phpに追記
1 2 | // 子テーマ版のlibrary/shortcode.php読み込み require_once( 'library_child/shortcode.php' ); |
くれぐれも先に「shortcode.php」を作ってくださいね。作っていないとエラーが出ます。
これでショートコードが使えるようになります！
※ここでエラーが出る場合はshortcode.phpの読み込みに失敗しているということなので、ファイルの名前、指定しているパスが間違っていないかの確認をしてみてください。
ストークカスタマイズ-ショートコードを試す
ショートコードは「AddQuicktag」プラグインを使うと簡単に挿入できるようになるのでおすすめです！
共通部分として「head」に好きな文字を入れることができます。
毎回変えるつもりがないなら「AddQuicktag」への登録時に決めてあるものをいれておけばOKです。
リンクとテキスト指定バージョン
1 | [relation head="あわせて読みたい" link="https://kazuharu.com" text="オススメ" color=""] |
あわせて読みたい
「link」にURL、「text」に文字を入れれば任意の文字でリンクを作ることができます。
内部リンクとしても使えるんですけど、外部サイトへのリンクを作る際におすすめです。
※それから、固定ページにリンクしたい場合もこちらを使ってください。（固定ページのID指定ができないので）
ID指定バージョン
1 | [relationId head="関連記事" postid="220" color=""] |
「postid」に記事のIDを入れるだけで文字とURLを自動で取ってきてくれます。
記事タイトルを変えたりしたときにもこちらは書き換えずにすみます。
IDを入れなかった場合は最新の記事を３つ表示します。
ID指定バージョン（複数）
1 | [relationId head="複数関連記事" postid="220,178,2694,2715,2693" color=""] |
複数関連記事
たった３０秒の雑談でコミュニケーションスキルがないのバレバレですよ！
気負わないで！いい雑談はいつでも切り上げられるようなもの。
コミュニケーション能力向上には雑談力が必須！
【自分らしく自由に生きる】好きに楽しく生きて幸せにならないと損！
会社を辞めたい？人間関係辛い？好きなことを仕事にする人増えてるよ。
複数表示にも対応させました。
とはいえ、通常版に記事のidを複数入れてるだけなので「AddQuicktag」への登録は通常版だけ登録すればいいかなと思います。
色の変え方
2017/4/8に簡単に色を変えられるように更新しました。
style.cssとshortcode.phpを上書きすれば変えれるようになります。
現在対応の色は
- 緑
- ピンク
- 黄色
- 黒
の４パターン。
ショートコードに「color」の要素が増えたので「AddQuicktag」に登録している人は書き換えておくと便利です。
1 | [relationId head="あわせて読みたい" postid="3228" color="green"] |
あわせて読みたい
1 | [relationId head="あわせて読みたい" postid="3228" color="pink"] |
あわせて読みたい
1 | [relationId head="あわせて読みたい" postid="3228" color="yellow"] |
あわせて読みたい
1 | [relationId head="あわせて読みたい" postid="3228" color="black"] |
あわせて読みたい
おつかれさまでした！
