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

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

新規登録して質問してみよう
ただいま回答率
85.49%
WordPress

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

PHP

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

Q&A

解決済

1回答

1029閲覧

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

ralphlauren

総合スコア9

WordPress

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

PHP

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

0グッド

0クリップ

投稿2018/07/06 04:28

編集2018/07/06 05:44

トップページの画像を「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>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/07/06 04:34

タグに[WordPress]も追加しておいてください。特殊な作りも多く[PHP]だけでは片付かない可能性が高いです。また、ひとまず任意の場所に貼り付けてみて想定のものが画面表示されるか確認してみてください。
ralphlauren

2018/07/06 05:21 編集

「想定される場所に貼ってみましたがエラーになりました。 任意の場所を教えていただいても宜しいでしょうか?
m.ts10806

2018/07/06 05:23

エラー内容をコピペで追記してください。質問は編集できます。
m.ts10806

2018/07/06 05:25

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

2018/07/06 05:31

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

2018/07/06 05:31

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

回答1

0

ベストアンサー

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

<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 06:53

編集2018/07/08 11:21
momosiri

総合スコア1509

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ralphlauren

2018/07/06 08:02

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

2018/07/06 11: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 ファイルの変更をアップロードする必要があります。」 というエラーがでて変更できませんでした。 今朝、他の場所に挿入した時も同じエラーが出ていました。 どのように対処すれば良いでしょうか? 何度もお手数をおかけして申し訳ございませんが、何卒ご教示いただけますよう宜しくお願い申し上げます。
momosiri

2018/07/06 13:23

Wordpressの4.9から実装されたテーマ更新時のコードチェックが働いているのだと思われます。そのほかにも「何かが間違っているようです・・」などいろいろな文章があります。 原因のほとんどはこのチェック機能の誤動作(厳しさ?)で、コードが合っているなら一旦FTPでサーバー上からファイルを入手し、変更した後に同じ場所へアップロードすることで回避できます。ただ本当にコード間違いだと管理画面にも入れない状態になってしまうこともありますから、ダウンロードしたらコピー(バックアップ)を取って変更を加えるようにしましょう。そうしておけばダメだった場合も元のファイルを再び上書きすれば済むので・・・ また、このエラーは単純にコードのチェック機能の影響だけでなく、特定のプラグインやプラグインの組み合わせなどでも出るようです(環境にもよるようで、どれが・・という特定はできないみたいです)。 リリースされてから長い間更新されていないプラグインや最近更新されたプラグインなどあれば停止したり最新へ更新したりすることで回避できる場合もあります(ただし更新などによってサイトに影響があるかもしれませんので自己責任で行ってください)。 また、そのテーマの中のカスタマイズ部分が影響していることもありますから、テーマを別のものへ一旦変更して、カスタマイズしたいテーマのコードを編集するとうまく完了できることもあるので、いろいろと試してみるしかないかと思います。
ralphlauren

2018/07/06 21:32

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

2018/07/07 00:09

上のソースの中を見て画像が参照されていると分かるのは指摘した箇所だけですから、あとはサイトを開示してみて全体のソースを見てもらうか、きちんと修正をお願いするかのいずれかになると思います。 同じテーマを使用していないので何とも言えません・・・と回答に書かせていただいたのはこのことでサイトの実態が見えない以上書かれているコードの中でしか回答できないという意味です。 サイトURLを公開することで有効な回答が得られるかも知れませんね。
ralphlauren

2018/07/07 03:21

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

2018/07/07 03:59

サイト見させていただきました。やはりヘッダーではなかったですね。 <div id="index_img"></div> で表示されています(というか本文はこれしかないというページですね) テーマ内に直接書かれているものですか?でしたら<div id="index_img"></div>をスライダーのPHP化ショートコード<?php echo do_shortcode('[metaslider id="176"]'); ?>に変えるだけですね。 <main>~</main>の間がこのテーマでは本文になるようですから、まずはこの間にショートコード入れてどうなるか?を検証しながらした方がいいと思います。
ralphlauren

2018/07/07 15:52

何度もご親切にありがとうございます!! 心より感謝いたしております。 スライダーに置き換える事は出来たのですが、微妙な調整が難しくて… 素人なので一旦スライダーに置き換える事は諦めます。 何度も質問をして申し訳ないのですが、もう一点だけご教示お願いできますでしょうか? 今、表示されているトップページの写真をダウンロードして、修正して、再度アップロードしたいのですが、ダウンロードする事はできますでしょうか? どこから引っ張ってきているか分からないのです。 ダウンロードする方法とアップロードする方法を教えていただけると助かります。 また、携帯で見た時の調整方法もお分かりになりましたらご教示いただけると幸いでございます。 図々しく何度もお伺いして申し訳ございません。 恐縮ですが何卒ご確認のほど宜しくお願いいたします。
momosiri

2018/07/07 17: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に書かれているようですよ。 ・・・詳しくはテーマの中身をすべて見てみたり、テスト用のサイトを用意してみたり、はたまた実際のサイトで見てみたり・・とする必要がありますから、ここではこれ以上の回答は難しいです。
ralphlauren

2018/07/07 18:59 編集

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

2018/07/08 07:30

この画像を入れ替えたいということですか?? であればサイズをそろえた代替画像を用意して同じファイル名にし、同じ場所へ転送すれば上書きされると思いますが・・・。 元に戻せるように一応元の画像はパソコンへダウンロードして保存してくださいね
ralphlauren

2018/07/08 11:09

アドバイスいただきありがとうございます!! 是非やってみたいです!! 現状の画像を修正して、同じ画像を同じ場所へアップし直したいのです。 手元に現状の画像がないので、一度ダウンロードして画像修正をし、再度同じ場所へ修正した画像をアップロードしたいのですが… 知識がないため、もし宜しければダウンロードの仕方とアップロードの仕方をご教示いただけないでしょうか? 何度も本当に申し訳ございません。 お忙しい中大変恐縮ではございますが何卒宜しくお願い申しあげます。
momosiri

2018/07/08 11:19

ファイルの転送はFTPクライアントというパソコンのソフト(Filezillaがおすすめ)を使う方法、サーバーのファイルマネージャーというツールを使う方法、Wordpressのプラグインを使う方法があります。 「Wordpress ファイル 転送」などのキーワードでやり方などについては検索してみてください。 プラグインで行うなら https://www.momosiri.info/cms/wordpress-file-trans/ で紹介してますので参考に!! 質問と主旨が変わってきてしまいましたので、その旨を回答に追記させていただき、回答は終了させていただきたく思います。
ralphlauren

2018/07/08 11:58

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問