[公開日]2017/06/16

アルバトロスのヘッダーにMeta Sliderでスライダーをつけた方法を書くよ。【WordPress】

いらっしゃいませ!ふじさわです。
えー、お気づきの方もいると思いますが、ブログのデザインを大幅に変更しました。

トップページに、スライダーが設置されています。

なんといってもポイントは、一番上に設置された「スライダー」です。シュッシュッってやつです。
思うところがあり、スライダーをなんとしても設置したかったので、奮闘記を紹介します。

目次


1、アップルっぽいデザインにしたい
2、Meta Sliderでスライダー作った
3、「テーマの編集」のどこにいれるか問題


1、アップルっぽいデザインにしたい

今回のテーマはズバリ「アップルっぽいサイトにする」ことでした。
そもそもこのブログのドメインにも「iPhone」が入ってるし、もともとは「iPhone愛用中ドコモ店員」という名前でやってたくらい、アップルは好きです。

で、
Appleの商品紹介っぽいページを作った
の記事で書いたように、「アップルのホームページかっこいい」と思い、自分のブログをそれに似せるようにしました。

アップルっぽいページを作るポイントは4つで、

・全体的に白と黒のデザイン(そうすることで、カラフルなコンテンツが目立つ)
・白地に黒テキスト、商品画像には影つき
・ヘッダーにドドンとあるスライダー
・翻訳調の日本語

この4つだけで、アップルっぽいページになることが判明したので、そうしました。

2、Meta Sliderでスライダー作った

ここで問題になったのは、僕が使ってるテーマ「アルバトロス」には、ヘッダーのスライダー機能が実装されていないことです。

アルバトロスはけっこう有名なテーマで有料なのに、スライダー機能なくて残念・・・。
一応「スライダー」の機能はついてるんだけど、すんごく小さいスライダーで、僕がイメージするサイズではなかったです。
ついでに同じく有名な「ストーク」も試しましたが、思うようなスライダー機能はついていませんでした。

ということで、意地でプラグインを検索し、「Meta Slider」というプラグインをワードプレスに入れました。
新規プラグインの追加の仕方とかはここでは解説しません。がんばって。

「Meta Slider」をダウンロードし、有効化し、メニューから選択すると、上のような画面になります。
直感的に操作できるプラグインでよかった。

画面の左側には、スライドさせたい画像と、紐づけたいURLを入力します。
右上に、画像のサイズや、スライドの種類(4種類から選べる)を選び、スライドのスピードなどを調整します。

右下の「使い方」の項目で「ショートコード」か「テンプレートに含める」があるので、それぞれを選ぶと、テンプレートかショートコードが生成されるので、それぞれを必要なところに挿入することで、作られたスライダーを載せられます。

3、「テーマ編集」のどこにいれるか問題

いろいろ調べると、「テーマの編集」のなかの「header.php」に入れるのが正解みたいになってます。

しかし僕がその通りにやると、「トップには表示されるが、記事ページにも、固定ページにも表示される」という問題があります。グヌン。

記事ページや固定ページには表示させたくないので、同じコワーキングスペースのくろぽんをサラダチキンで買収して、どこにいれるのが正解か、教えてもらいました。

くろぽんは「index.php」にいれたけどダメで、もうちょっと考えた結果・・・。

「home.php」のここだぁぁぁっ!!

赤で囲んだ部分が、メタスライダーで生成したコードです。
これで、トップページにだけスライダーが表示され、それ以外のページには表示されません。

これはアルバトロスだからそうなだけで、他のテーマだと「index.php」かもしれません。

ということで、新しくかっこよくなったふじさわブログをよろしくお願いします。
めちゃくちゃ珍しく(ほぼはじめて)、技術的な記事を書きました。

ということで、今日の記事は以上です。
またのお越しを、お待ちしております!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でふじさわをフォローしよう!







10月1日に原宿にて開催のイベント、参加受付中!

10月1日に原宿にて開催のイベント、参加受付中!

人気ブログの記事をシェアしよう!

コメントを残す

メールアドレスが公開されることはありません。