ストークで写真付きの関連記事。初心者でも簡単にブログの見た目が変わる。

2017年8月25日

 

うえのさん
こんにちは~!
姫路のホームページ屋さん
うえのです(@flexbox)です。

 

 

こんな人はいませんか?

  • ワードプレスのテーマ「ストーク」で関連記事ショートコードを使えるのを知らなかった。
  • ワードプレスのテーマ「ストーク」で記事中の関連記事をリンク文字列じゃ差別化出来ない。
  • テーマのfunction.phpを触るのはリスキー、または忙しいと思っていた。
  • ワードプレスのテーマ「ストーク」見栄えを変えてみたい。

 

 

ブロガーやアフィリエイターが頭を悩ませる ” リンクは、テキストリンクorリンクカード  ”どっちがクリックされやすいのか?

 

 

いままでの定説では、テキストリンクでしたね。

 

 

今朝、シンプリシティの作者 わいひらさんのツイートでその結論に触れられていました。

 

 

 

 

結論から言えば、ブログカードの圧勝でした。

 

 

うえのさん
ブログカード・・使わな損やない!?

 

 

 

ストーク標準機能のショートコードで関連記事が出せる。

 

 

オープンゲージのホームページにストークの使い方が書いてありますね。

 

 

フキダシやトップページのスライダーも、どうやったらいいかていねいに書いてあります。

 

 

 

オープンゲージのHPの説明です

 

 

このコードを記事内にコピペして、記事ID(4桁の数字)を入れたら、キレイに出ますよ。

 

 

ストーク

 

 

 

簡単バージョン

 

 

ストークブログカード1

 

 

 

 

カスタムバージョン

 

 

ストークブログカード2

 

 

 

ザックリ言うと・・・記事にひとつずつIDがあって、ショートコードにIDをコピペ!

 

 

 

・・・記事一覧ページでIDが出てくれてたら、楽チンさん。

 

 

 

やり方書いてるけど、function.phpを触って、ブログを真っ白にしたことあるから怖いな~。

 

 

ストークのカスタムを慎重にやってみた(xserverの場合のみ)

 

やる前には、必ずバックアップを取りなさい!復元出来なくても、知らんで! 

 

 

手順は3ステップ!

 

1)テーマの中身をダウンロード

2)テキストエディタで開く(サクラエディタを使用)

3)コピペで書き換えた中身をもとへ戻して、記事一覧ページを確認。

 

 

その前に・・・

 

事前に2)で使うテキストエディタってソフトをパソコンに入れてほしいです。

 

日本で二番目に優しい解説を見て、準備作業してくださいね。

 

 

【参考記事】 ワードプレスの必需品!優しく教えるサクラエディタのインストール方法。

 

 

 

1)テーマの中身をダウンロード

 

 

エックスサーバーのインフォパネル⇒ファイルマネージャーをクリック。

 

 

 

 

 

エックスサーバーのWebFTP画面になるので、画像の順番で作業してくださいね。

 

赤枠をクリックし続けてください。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

パソコンのダウンロードフォルダへ保存されました。

 

 

 

 

 

 

ダウンロードフォルダからデスクトップへコピペ

 

 

このままでは、作業しにくいので、デスクトップへ出しましょう。

 

 

赤枠をクリック!

 

 

 

 

 

 

 

 

 

ダウンロードフォルダの中から、functionをマウスの右クリックで、コピー。

 

 

 

 

 

デスクトップに貼り付けましょう。

 

 

 

 

 

 

2)テキストエディタで開く(サクラエディタを使用)

 

ファイルの中身を書き換えていきます。

 

 

図のとおりにやれば、かんたんに出来るので安心してくださいね。

 

 

デスクトップにコピペしたfuncionsアイコンをダブルクリック。

 

 

 

 

 

 

うえのさん
こんな画面が出たらOK!

 

 

 

 

 

画面を一番下までスクロール。

 

 

 

 

 

 

ここからコピペする方法を書いていきます。

 

 

画像の下にコードが書いてありますが、このコピー方法です。

 

 

 

 

 

 

 

右から2番目のコピーアイコンを押して、

 

 

 

マウスを、青反転した文字列の上で右クリック ⇒ コピー

 

 

 

 

 

 

文字に起こすとこんな感じ。

 

 

 

 

 

ここまで大丈夫ですか???

 

 

 

サクラエディタの画面に戻りましょう。

 

 

 

 

コピーしたコードを430行目に貼り付けます。

 

 

 

 

 

 

 

完成形がこちら。

 

 

 

 

 

 

 

 

 必ず保存してください。

 

 

 

 

 

 

 

もし、こんな画面が出たら、「はい」をクリックでOK。

 

 

 

 

 

 

3)コピペで書き換えた中身をもとへ戻して、記事一覧ページを確認。

 

 

あと一息です。

 

 

ここで、業を中断しても大丈夫ですが、作業はファイルを元の場所に戻すだけ。

 

 

デスクトップのこのファイルは、もう書き換わっています。

 

 

 

 

 

 

エックスサーバーWebFTP画面を開いたままですね

 

 

 

① ファイルの選択をクリック。

 

 

② いっぱいアイコンの画面の中から、図の functionsアイコンをダブルクリック。

 

 

 

 

 

 

 

エックスサーバーWebFTP画面が、このようになったら

 

 

アップロードをクリックしてください。

 

 

 

 

 

 

ワードプレスのダッシュボードを開きましょう。

 

 

 

投稿一覧に、赤枠のようにID欄が出ていますね。

 

 

 

 

 

 

大変お疲れさまでした。

 

 

 

 

ID欄が出ていない時

 

 

エックスサーバーやサクラエディタを全部閉じてください。

 

 

そこから、もう一度ダッシュボードを開いて、投稿一覧を確認。

 

 

 

 

 

うえのさん
ダメなら、少し休みましょう。

 

 

 

 

 

イチから、この方法に再チャレンジしてくださいね。

 

 

もし、画面が真っ白になっていても大丈夫です!

 

 

バックアップから復元できますよ。

 

 

関連記事を出すカスタムコードのまとめ

 

はじめて中級者向けの記事をかいてみました。

 

初心者にもかんたんに、かなりの図使って説明しましたが、

 

 

分かりやすいやすかったでしょうか???

 

カスタムするのって、ハードルが高いし時間もかかります。

 

 

ストークを作られた OPEN CAGEの矢野さんが、

 

 

このカスタムを詳しく書いた bridge って会社へのリンクを貼って下さっていました。

 

 

 

また、カスタマイズ記事もあげたいと思います。

 

 

うえのさん
うえのでした。
(@flexbox)