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

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

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

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

PHP

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1213閲覧

wordpress対応をすると画像と文字が消える。

keko

総合スコア6

WordPress

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

PHP

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/05/10 22:15

wordpressの対応に変換したときにjqueryを読み込むとhtmlが一箇所だけ(下記の部分)消えます。
恐らくslickの読み込みがうまくいってないのかなと思っているのですが、解決方法を教えていただきたいです。
html部分の表記は、上にprevious 下にnextと表記されていて何ことかわかりません
よろしくお願いします。

indexphp

1<?php get_header(); ?> 2 3 <~中略〜> 4 <div class="plan"> 5 <h1 class="plan-name"> 6 おすすめのプラン 7 </h1> 8 <p class="Recommend">Recommend Plan</p> 9 <div id="wrap"> 10 <ul id="slider"> 11 <li> 12 <span> 13 <img src="<?php echo get_template_directory_uri(); ?>/image/rec-plan01.png" alt="スライド1枚目"> 14 <div class="explain"> 15 <h4>温泉でゆったりポカポカプラン<朝食選択可></h4> 16 <p>お値段:<span>6000円</span>/人</p> 17 </div> 18 </span> 19 </li> 20 <li> 21 <span> 22 <img src="<?php echo get_template_directory_uri(); ?>/image/rec-plan02.png" alt="スライド2枚目"> 23 <div class="explain"> 24 <h4>【ケーキセット】選べるケーキお飲み物のセット!</h4> 25 <p>お値段:<span>2000円</span>/人</p> 26 </div> 27 </span> 28 </li> 29 <li> 30 <span> 31 <img src="<?php echo get_template_directory_uri(); ?>/image/rec-plan03.png" alt="スライド3枚目"> 32 <div class="explain"> 33 <h4>バータイム「2DRINKSプラン」選べるドリンク2杯におつまみが付いたプラン</h4> 34 <p>お値段:<span>8000円</span>/人</p> 35 </div> 36 </span> 37 </li> 38 <li> 39 <span> 40 <img src="<?php echo get_template_directory_uri(); ?>/image/rec-plan04.png" alt="スライド4枚目"> 41 <div class="explain"> 42 <h4>【リモート宴会プラン】京の極楽からシェフ厳選メニューをご提供</h4> 43 <p>お値段:<span>6000円</span>/人</p> 44 </div> 45 </span> 46 </li> 47 <li> 48 <span> 49 <img src="<?php echo get_template_directory_uri(); ?>/image/rec-plan05.png" alt="スライド5枚目"> 50 <div class="explain"> 51 <h4>【数量限定】季節の会席とミニボトルのドリンク付きプラン</h4> 52 <p>お値段:<span>8000円</span>/人</p> 53 </div> 54 </span> 55 </li> 56 </ul> 57 </div> 58 </div> 59 <~中略~> 60 61 <?php get_footer(); 62 63

functionsphp

1<?php 2 3//標準機能 4 5 6function my_setup(){ 7add_theme_support( 'post-thumbnails' ); 8add_theme_support( 'title-tag' ); 9add_theme_support( 'html5', array( 10 'search-form', 11 'comment-form', 12 'comment-list', 13 'gallery', 14 'caption', 15) ); 16} 17add_action( 'after_setup_theme', 'my_setup' ); 18 19//CSS /Javascript 読み込み 20 21function my_script_init(){ 22 wp_enqueue_style( 'style-name', get_template_directory_uri() . '/style.css' , array(), '1.0.0', 'all'); 23 wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/reset.css' , array(), '1.0.0', 'all'); 24 wp_enqueue_style( 'style-name', get_template_directory_uri() . '/slick-theme.css' , array(), '1.7.0', 'all'); 25 wp_enqueue_style( 'style-name', get_template_directory_uri() . '/slick.css' , array(), '1.7.0', 'all'); 26 wp_deregister_script('jquery'); 27 wp_enqueue_script('main', get_template_directory_uri() . '/main.js', array( ), '2.2.4', true); 28 wp_enqueue_script('script', get_template_directory_uri() .'/slick.min.js', array( ), '1.7.0', true); 29} 30add_action('wp_enqueue_scripts', 'my_script_init');

headerphp

1 2<!DOCTYPE html> 3<html <?php language_attributes(); ?>> 4<head> 5 <meta charset="<?php bloginfo( 'charset' ); ?>"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title><?php wp_title( '|', true, 'right' );?><?php bloginfo('name'); ?></title> 9 <link rel="stylesheet" href="<?php echo get_stylesheet_uri();?>"> 10 <link rel="stylesheet" href="<?php echo get_stylesheet_uri() ;?>"> 11 <link href="<?php echo get_stylesheet_uri();?>" rel="stylesheet" type="text/css"> 12 <link href="<?php echo get_stylesheet_uri();?>" rel="stylesheet" type="text/css"> 13 14<?php wp_head(); ?> 15</head> 16 17<body <?php body_class(); ?>> 18 <div class="wrap"> 19 <header class="header"> 20 <div class="header-fixed"> 21 <img class="header-logo" src="<?php echo get_template_directory_uri(); ?>/image/logo.png"> 22 <button type="button" id="js-buttonHamburger" class="c-button p-hamburger" aria-controls="global-nav" aria-expanded="false"> 23 <span class="p-hamburger__line"> 24 </span> 25 </button> 26 </div> 27 <div class="nav header-nav" id="nav"> 28 <ul class="nav-list"> 29 <li class="nav-item"><a href="<?php echo home_url();?>#">宿泊予約</a></li> 30 <li class="nav-item"><a href="<?php echo home_url();?>#">観光情報</a></li> 31 <li class="nav-item"><a href="<?php echo home_url();?>#">よくあるご質問</a></li> 32 <li class="nav-item"><a href="<?php echo home_url('/contact/' ); ?>">お問い合わせ</a></li> 33 </ul> 34 </div> 35 </header>

footerphp

1<footer> 2 <div class="terms"> 3 <ul class="last"> 4 <li><a href="#">利用規約</a></li> 5 <li><a href="#">プライバシーポリシー</a></li> 6 <li><a href="#">個人商取引法に基づく表記</a></li> 7 <li><a href="<?php echo home_url('/contact/' ); ?>">お問い合わせ</a></li> 8 </ul> 9 </div> 10 <img src ="<?php echo get_template_directory_uri(); ?>/image/logo.png" class="footer-logo"> 11 <p>Copyright (c) 2021 極楽亭 <?php bloginfo( 'name' ); ?> ALL Right Reserved.</p> 12 </footer> 13 14 </div> 15 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 16 </div> 17 <?php wp_footer(); ?> 18 </body> 19 </html>

jquery

1jQuery(function(){ 2 jQuery('#slider').slick({ 3 autoplay: true, 4 autoplaySpeed: 5000, 5 arrows: true, 6 Infinity:true, 7 slideToScroll:1, 8 slidesToShow: 3, 9 centerMode: true, 10 centerPadding: '15%', 11 focusOnSelect: true, 12 responsive:[ 13 { 14 breakpoint:767, 15 settings: { 16 centerMode: true, 17 slidesToShow: 1, 18 slidesToScroll: 1, 19 centerPadding: '0%', 20 } 21 } 22 ] 23 }); 24 jQuery('.faq-title').on('click',function(){ 25 jQuery(this).toggleClass('active'); 26 jQuery(this).next().slideToggle(); 27 }); 28 jQuery('#js-buttonHamburger').click(function () { 29 jQuery('#nav').toggleClass('open'); 30 jQuery("#global-nav").slideToggle(); 31 32 if (jQuery('#js-buttonHamburger').attr('aria-expanded') == 'false') { 33 jQuery('#js-buttonHamburger').attr('aria-expanded', true); 34 } else { 35 jQuery('#js-buttonHamburger').attr('aria-expanded', false); 36 } 37 }); 38 }); 39

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

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

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

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

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

guest

回答1

0

ベストアンサー

slickはjqueryが必要なのでjqueryの後に読み込み必要があるのでは。
wp_enqueue_scriptの第3引数でarray('jquery')みたいな感じで指定します。

関数リファレンス/wp enqueue script

投稿2021/05/11 11:25

yuki84web

総合スコア1857

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

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

keko

2021/05/11 13:32

ご回答ありがとうございます。 そのようにしてみると今度は、jqueryを読み込まないです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問