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

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

ただいまの
回答率

90.51%

  • PHP

    20347questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    7211questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 303

ralphlauren

score 1

トップページの画像を「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ページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mts10806

    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/06 17:02

    Momosiri様
    ご丁重な教示、誠にありがとうございます。初心者で業者に頼んだのですがなかなか業者と連絡つかず緊急性を要したので、トップページだけのら自力でも変更したく、教本みても、業者がアレンジしていて、トップページを変更するバーもなく、コードソースをみて作業しなくてはならず困っておりました。ただいま出先で打ち合わせ中なのであとでゆっくり確認させていただきます。まずは御礼まで。

    キャンセル

  • 2018/07/06 20:58

    Momosiri様
    改めましてご丁寧にご解答いただきありがとうございます。
    アドバイスいただきました通り、
    <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"]'); ?>
    を挿入したのですが、
    「致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。SFTP を使うなど、他の手段で PHP ファイルの変更をアップロードする必要があります。」
    というエラーがでて変更できませんでした。
    今朝、他の場所に挿入した時も同じエラーが出ていました。
    どのように対処すれば良いでしょうか?
    何度もお手数をおかけして申し訳ございませんが、何卒ご教示いただけますよう宜しくお願い申し上げます。

    キャンセル

  • 2018/07/06 22:23

    Wordpressの4.9から実装されたテーマ更新時のコードチェックが働いているのだと思われます。そのほかにも「何かが間違っているようです・・」などいろいろな文章があります。

    原因のほとんどはこのチェック機能の誤動作(厳しさ?)で、コードが合っているなら一旦FTPでサーバー上からファイルを入手し、変更した後に同じ場所へアップロードすることで回避できます。ただ本当にコード間違いだと管理画面にも入れない状態になってしまうこともありますから、ダウンロードしたらコピー(バックアップ)を取って変更を加えるようにしましょう。そうしておけばダメだった場合も元のファイルを再び上書きすれば済むので・・・

    また、このエラーは単純にコードのチェック機能の影響だけでなく、特定のプラグインやプラグインの組み合わせなどでも出るようです(環境にもよるようで、どれが・・という特定はできないみたいです)。

    リリースされてから長い間更新されていないプラグインや最近更新されたプラグインなどあれば停止したり最新へ更新したりすることで回避できる場合もあります(ただし更新などによってサイトに影響があるかもしれませんので自己責任で行ってください)。

    また、そのテーマの中のカスタマイズ部分が影響していることもありますから、テーマを別のものへ一旦変更して、カスタマイズしたいテーマのコードを編集するとうまく完了できることもあるので、いろいろと試してみるしかないかと思います。

    キャンセル

  • 2018/07/07 06:32

    何度もご丁寧にご解答いただきありがとうございます。
    FTPでサーバー上からファイルを入手し、変更した後に同じ場所へアップロードすることで回避できたのですが、<img class="img100" src="<?php echo get_template_directory_uri(); ?>/img/logo.png" alt="MAYUMI OKANISHI 岡西 真由美">は変更したいトップページ画像ではなく、ヘッダーのロゴ画像でした。
    ヘッダーの下にある大きいトップページ画像とスライダーを置き換えたいのですが、どの部分がトップページ画像かお分かりになりますでしょうか?
    全く知識がないもので何度もご迷惑をおかけしてしまい本当に申し訳ございません。
    大変お手数ですが再度ご教示いただけますと幸いでございます。
    恐れ入りますが何卒宜しくお願い申し上げます。

    キャンセル

  • 2018/07/07 09:09

    上のソースの中を見て画像が参照されていると分かるのは指摘した箇所だけですから、あとはサイトを開示してみて全体のソースを見てもらうか、きちんと修正をお願いするかのいずれかになると思います。

    同じテーマを使用していないので何とも言えません・・・と回答に書かせていただいたのはこのことでサイトの実態が見えない以上書かれているコードの中でしか回答できないという意味です。

    サイトURLを公開することで有効な回答が得られるかも知れませんね。

    キャンセル

  • 2018/07/07 12:21

    ご親切にありがとうございます。
    アドバイスいただき感謝いたします。
    サイトURLは、http://j-beautybody.com/でございます。
    無知なもので本当に申し訳ございません。
    それらしきPHPを見つけました。
    <?php get_header(); ?>
    <main>
    <div id="index_img"></div>
    </main>
    <?php get_footer(); ?>
    だと思われます。
    これのどの部分と入れ替えたら良いでしょうか?
    何度もお手数をおかけし申し訳ございません。
    何卒宜しくお願い申し上げます。

    キャンセル

  • 2018/07/07 12:59

    サイト見させていただきました。やはりヘッダーではなかったですね。

    <div id="index_img"></div>

    で表示されています(というか本文はこれしかないというページですね)

    テーマ内に直接書かれているものですか?でしたら<div id="index_img"></div>をスライダーのPHP化ショートコード<?php echo do_shortcode('[metaslider id="176"]'); ?>に変えるだけですね。

    <main>~</main>の間がこのテーマでは本文になるようですから、まずはこの間にショートコード入れてどうなるか?を検証しながらした方がいいと思います。

    キャンセル

  • 2018/07/08 00:52

    何度もご親切にありがとうございます!!
    心より感謝いたしております。

    スライダーに置き換える事は出来たのですが、微妙な調整が難しくて…
    素人なので一旦スライダーに置き換える事は諦めます。

    何度も質問をして申し訳ないのですが、もう一点だけご教示お願いできますでしょうか?

    今、表示されているトップページの写真をダウンロードして、修正して、再度アップロードしたいのですが、ダウンロードする事はできますでしょうか?

    どこから引っ張ってきているか分からないのです。

    ダウンロードする方法とアップロードする方法を教えていただけると助かります。

    また、携帯で見た時の調整方法もお分かりになりましたらご教示いただけると幸いでございます。

    図々しく何度もお伺いして申し訳ございません。
    恐縮ですが何卒ご確認のほど宜しくお願いいたします。

    キャンセル

  • 2018/07/08 02:48

    ソースからだと
    スマホなどのモバイル用
    http://j-beautybody.com/wordpress/wp-content/themes/mayumi_okanishi/img/img01_sp.jpg
    タブレット用
    http://j-beautybody.com/wordpress/wp-content/themes/mayumi_okanishi/img/img01_tb.jpg
    パソコン用
    http://j-beautybody.com/wordpress/wp-content/themes/mayumi_okanishi/img/img01_pc.jpg

    になっているので、すべての画像は「Wordpressのインストール場所」→「wp-content」→「themes」→「mayumi_okanishi」→「img」の中にありますね。

    画像がそれぞれの画面サイズに対して用意されているということからの想像ですけど、このテーマはユーザーエージェント(アクセスした機器)や画面の割合によって自動調整する、いわゆるレスポンシブ対応のテーマではないのだと思われます(テーマ名がお名前?のようですからオリジナルなものなのでしょう)。

    例えばスマホの画像では縦横や画面の幅にできるだけ対応できるよう、最小幅0最大幅480pxで上手に拡大縮小してちょーだいとCSSに書かれているようですよ。

    ・・・詳しくはテーマの中身をすべて見てみたり、テスト用のサイトを用意してみたり、はたまた実際のサイトで見てみたり・・とする必要がありますから、ここではこれ以上の回答は難しいです。

    キャンセル

  • 2018/07/08 03:30 編集

    ご丁寧に何度も本当にありがとうございます。
    しかもこんな深夜にお手数をおかけしてしまい申し訳ございません。
    複雑になっているのですね。。。
    今、表示されている画像をダウンロードして、再度全く同じ画像をアップロードする場合でも、難しいでしょうか?
    全く同じ画像なので大きさなどは変わらないのですが、やはり難しいでしょうか?
    どうしても修正したくて・・・しつこくて申し訳ございません。
    ムリを承知でお伺いしました。
    失礼をお許しくださいませ。

    キャンセル

  • 2018/07/08 16:30

    この画像を入れ替えたいということですか??

    であればサイズをそろえた代替画像を用意して同じファイル名にし、同じ場所へ転送すれば上書きされると思いますが・・・。

    元に戻せるように一応元の画像はパソコンへダウンロードして保存してくださいね

    キャンセル

  • 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で質問しよう!

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

関連した質問

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

  • PHP

    20347questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    7211questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。