質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.58%

wordpressトップページの画像を「meta slider」のスライドショーに変更したいです

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,189

ralphlauren

score 9

トップページの画像を「meta slider」のスライドショーに変更したいです。welcartというテーマです。

header.phpのどこにショートコードを貼り付けたら良いのか教えていただきたいです。

宜しくお願いいたします。

以下 挿入したい meta slider ショートコード

<?php echo do_shortcode('[metaslider id="176"]'); ?>


このheader.phpのどこに上のコードをはりつけ、何をさくじょしたらいいのか?

なにもわからないのでよろしくお願いします。

<!DOCTYPE HTML>

<html lang="ja">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes">

<meta name="format-detection" content="telephone=no">

<title><?php bloginfo('name'); ?></title>

<meta name="description" content="<?php bloginfo('description');?>" />

<meta name="author" content="MAYUMI OKANISHI 岡西 真由美" /> 

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/common.css" type="text/css">

<link href="https://fonts.googleapis.com/earlyaccess/notosansjapanese.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Prata&amp;subset=cyrillic-ext,vietnamese" rel="stylesheet">




<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<script type="text/javascript">

document.createElement('main');

</script>

<![endif]--> 

<?php wp_head(); ?>

</head>

<body id="top"<?php if(is_home()){ echo " class='index_content'"; } else { echo " class='page_content'"; } ?>>

<header>

<h1><a href="<?php bloginfo('url');?>" class="img_link"><img class="img100" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="MAYUMI OKANISHI 岡西 真由美"></a></h1>

<div id="dr-menu" class="tb_display"><span></span></div>

<nav class="menu" id="dr-slide">

<ul>

<li class="parent"><a href="<?php bloginfo('url');?>/about">ABOUT</a>

<?php if(is_page("about")){ ?>

<ul class="pc_display">

<li><a href="#menu01" class="Down">日本ビューティーボディ協会について</a></li>

<li><a href="#menu02" class="Down">協会理念</a></li>

<li><a href="#menu03" class="Down">活動内容</a></li>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/07/06 14:25

    あ、あとどこに貼り付けたのかも記載してください

    キャンセル

  • ralphlauren

    2018/07/06 14:31

    親切にありがとうございます いま、出先で記載ができません 申し訳ございません

    キャンセル

  • ralphlauren

    2018/07/06 14:31

    親切にありがとうございます いま、出先で記載ができません 申し訳ございません

    キャンセル

回答 1

checkベストアンサー

+2

同じテーマを使用していないので何とも言えませんが、上記のコードが何も手を加えていないとすれば・・・

<h1><a href="<?php bloginfo('url');?>" class="img_link"><img class="img100" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="MAYUMI OKANISHI 岡西 真由美"></a></h1>

でロゴ設定をしています(画像はテーマのカスタマイズから設定した画像になっていると思います)

この下にMeta SliderのショートコードをPHPとして動作させるためのコード(質問に書いてあるコードです)

<?php echo do_shortcode('[metaslider id="176"]'); ?>


を挿入してみて、ロゴ画像の下にスライダーが表示されると思います。

で、ロゴ画像をそのままスライダーにするには・・・

ロゴ画像を呼び出している

<img class="img100" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="MAYUMI OKANISHI 岡西 真由美">


の部分を

<?php echo do_shortcode('[metaslider id="176"]'); ?>


にしてみて動けばリンク付きのスライダーロゴにできると思われます。

またロゴ画像をやめてテキスト(サイト名)を表示した状態でスライダーを追加するのであれば

<h1><a href="<?php bloginfo('url');?>" class="img_link"><img class="img100" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="MAYUMI OKANISHI 岡西 真由美"></a></h1>
<?php echo do_shortcode('[metaslider id="176"]'); ?>


とすればいいでしょう。

-------------------------
コメントでやりとりしている間に要件が変わってきましたので追記しておきます。

やりたいこととしては、今あるトップページ画像を影響なく入れ替えたいということになりました。

コメント欄で書かせていただいていますが、
1.画像ファイルをパソコンに保存
2.サイズ確認して同じサイズ・同じファイル名の画像を用意
3.サーバーの同じ場所へ上書き
これで解決できると思います。

ファイル転送の仕方についてはご自身でお調べください。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/08 20:09

    アドバイスいただきありがとうございます!!
    是非やってみたいです!!

    現状の画像を修正して、同じ画像を同じ場所へアップし直したいのです。

    手元に現状の画像がないので、一度ダウンロードして画像修正をし、再度同じ場所へ修正した画像をアップロードしたいのですが…

    知識がないため、もし宜しければダウンロードの仕方とアップロードの仕方をご教示いただけないでしょうか?
    何度も本当に申し訳ございません。
    お忙しい中大変恐縮ではございますが何卒宜しくお願い申しあげます。

    キャンセル

  • 2018/07/08 20:19

    ファイルの転送はFTPクライアントというパソコンのソフト(Filezillaがおすすめ)を使う方法、サーバーのファイルマネージャーというツールを使う方法、Wordpressのプラグインを使う方法があります。

    「Wordpress ファイル 転送」などのキーワードでやり方などについては検索してみてください。

    プラグインで行うなら
    https://www.momosiri.info/cms/wordpress-file-trans/
    で紹介してますので参考に!!

    質問と主旨が変わってきてしまいましたので、その旨を回答に追記させていただき、回答は終了させていただきたく思います。

    キャンセル

  • 2018/07/08 20:58

    何度もご丁寧にご回答いただき本当にありがとうございました。
    心よりお礼申し上げます。
    色んな質問をしてしまい申し訳ございませんでした。
    感謝の気持ちでいっぱいです。
    お付き合いくださりありがとうございました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る