書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【AFFINGER4-カスタマイズ】カルーセルスライダー作成(プラグイン編)「WP Posts Carousel」をカスタマイズ

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

約1ヶ月ぶりの更新です。

お久しぶり。かきてぃーです。最近いろんなホームページに携わっており、ありがたい限りです。

  • 多言語サイト作ったり
  • 会員サイト作ったり
  • 有料制のサイト作ったり
  • ショッピングサイト作ったり

忙しくしつつ、知識はどんどん増えています。

私の近況報告は以下の記事で書いているので、興味がある方はどうぞw

えー今回の記事では、

https://kakitare.info/web/affinger4-help/

にてお願いがあった

https://gamewith.jp/

のサイトを参考に作成致します。

ただ、

①上部のゲーム紹介画面のスライドショー(gif画像のスライド)
②ニュース部分の記事型デザイン
③攻略部分のアイコンリスト
④スマホ画面でのゲーム紹介画像(トップの5つの画像が並んでいる部分)レスポンシブ方法
⑤おすすめの無料ゲームアプリ3選のリスト

と、要件が多いのでいくつか分割して記事を書いていきます。

数日は手が空くと思うので、今週書ければ書くぞ!

第1弾は①の対応。

カルーセルスライダーです。

カルーセルスライダーはどのサイトでもよく使うのでおまけを含めてご紹介します。

カルーセルスライダーを表示したいところにウィジェットを追加する

はい。いつものようにウィジェットに追加します。

結局カルーセルスライダーを表示したい場合はプラグインで表示するか、オリジナルのロジックを作成するかの2つです。

今回は、プラグインでの設定方法とJQueryで作る方法の2種類をご紹介します。

長くなるので、記事は2つに分かれています。

要件の「①上部のゲーム紹介画面のスライドショー(gif画像のスライド)」を作りたい方は2つ目の記事を参照して下さい。

かきてぃー
書き途中ですが、一応公開しました!随時追加します。

https://kakitare.info/web/carousel-slider2/

ウィジェットの追加方法はいつものことなので割愛します。

分からない方は以下の記事を参考にして下さい。

https://kakitare.info/web/contents-area/

利用できるウィジェットを追加する

ウィジェットが追加出来たら、ウィジェットにドラッグ&ドロップするためのアイテムを作成します。

以下の記事で説明しましたが、念のためもう一度。

https://kakitare.info/web/single-custom/#i-4

かきてぃー
まずはテスト表示用のテンプレートを作成しましょう。

ファイル名は任意ですが、とりあえず以下のように作成します。

  • 文字コード「UTF-8」
  • ファイル名「carousel-slider.php」

ファイルの中身は

「表示確認」

とだけ入力し保存し、子テーマの配下にアップロードします。

次に「functions.php」をカスタマイズします。

以下のように”利用できるウィジェット”に追加していきます。

※15行目には作成したファイル名を設定すること。

自分が追加したウィジェットエリアに作成したウィジェットを追加し、正常に表示していれば追加成功です。

もし、正常に表示していなければ、手順のどこかでミスっています。

1,表示しない

ウィジェット追加が怪しい。

https://kakitare.info/web/contents-area/

をもう一度確認しましょう。

そもそも15行目のファイル名は合ってますか?

2,利用できるウィジェットがない

https://kakitare.info/web/single-custom/#i-4

を確認して下さい。

3,1・2は問題ないのに表示しない

  • 子テーマ配下にアップロードしたか。
  • アップロードしたファイル名に誤字はないか。
  • 文字コードは使用しているサーバー(xserver・ロリポップ・さくらサーバーなど)に合っているか

を確認しましょう。

かきてぃー
コンピューターはとてもシビアです。1文字間違っていただけで、全く反応しません。一言一句違わないがチェックしましょう。
サメくん
うああ!!動かないと思ったら「carousel-slider 」の文字最後に半角スペースが入ってたー
イルカさん
うん。とてもよくある話です。メモ帳でカスタマイズをしているからだよ。サクラエディタとか秀丸とか使った方がいいよ。
サメくん
サ、サクラ?秀?戦国時代??
イルカさん
…。Google先生に聞きなさい。

プラグインを使って簡単にカルーセルスライダーを作成

※今回の目的とは違うので注意して下さい。

ただの画像・各記事のカルーセルスライダーを作成したい!

という方におススメです。

インストールするプラグインは「WP Posts Carousel」です。

このプラグインの特徴は投稿ページ・カスタム投稿ページ・固定ページカルーセルスライダーで表示できるという点です。

  • カテゴリ別
  • ある記事を除外する
  • 抜粋を表示する
  • 画像サイズを指定する
  • 自動スライドする

などかなり高機能です。

レスポンシブまで整っているので初心者には超ありがたいプラグインになります。

1つのカテゴリをカルーセルスライダーで表示する

まずは「投稿」→「新規追加」から投稿画面を開きます。

ビジュアルモードに切り替えると、アイテムの中に「WP Posts Carousel」があります。

表示するコンテンツを指定します。

https://lecture.ho-man.net/wordpress/1713/

上記のサイトで詳しくご説明されていたので、参考にして下さい。

出来上がったショートコードをウィジェットのテキストに貼り付けます。

※貼り付けは必ずテキストモードで貼り付けて下さい。

ショートコードがめんどうな方は、利用できるウィジェットの中に「WP Posts Carousel」がありますので、それを設定しても同様の結果になります。

で、画面を確認すると…

かきてぃー
うん。超絶簡単にカルーセルスライダーが追加出来ましたね。こりゃ凄い。
スポンサーリンク

クリックで別のリンクに飛ばす

「WP Posts Carousel」。すごく便利なんですが1つ残念なことが。

遷移する先が記事リンクになってしまう。

出来れば、アイキャッチ画像だけを表示してリンクは別にしたい!

なんてこともあるはず。

ということで、プラグインをカスタマイズします。

まずは固定リンクが追加出来るようにカスタムフィールドを追加します。

固定リンク用カスタムフィールドを追加

functions.php」をに以下を追記します。

大切なのは9~11行目です。

上から

  • post
  • page
  • news

とありますが、これは追加する投稿タイプの種類です。

  • post…投稿ページ
  • page…固定ページ
  • news…カスタム投稿(投稿タイプがnews)

となっております。

カスタム投稿を追加されている方は投稿タイプの種類によって11行目は変更して下さい。

画面を確認すると、カスタムフィールドが追加されていることが分かります。

これで準備は完了です。

「WP Posts Carousel」をカスタマイズして固定リンクに飛ばす

方法は「WP Posts Carousel」のリンクとなっている箇所を変更し、カスタムフィールドの値があった場合は、そのリンクを優先にするロジックを追加します。

Grepし、対象箇所を探したところ以下のファイルであることが分かりました。

「carousel-generator.class.php」

上記ファイルを修正します。

「プラグイン」→「WP Posts Carousel」→「編集」にて対象ソースを選択。

248行目に該当記事のリンクを取得しているロジックがあります。

ここを修正すればOKですね!

以下のように修正します。

1行目…post_urlを初期化。

2行目…カスタムフィールドの固定リンクを取得

3行目…値が取得出来たか判定

→ あればカスタムフィールドの値を設定

→ なければ今まで通り記事のリンクを設定

という感じです。

さて。動作確認。

グーグルのURLを設定して保存します。

トップページで確認すると…

はい。しっかりと設定したリンクになっていますね!

プラグインであれば、これぐらいで十分使えます!

かきてぃー
ちょっとプラグインの説明が長くなってしまいましたが、次がプラグインなしで作るカルーセルスライダーです。記事が長くなるので、次回記事に記載します。
かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.