将.PHP文件包含在2个DIV中

时间:2016-09-24 23:17:12

标签: javascript php jquery html css

我正在使用wordpress创建自定义主题。

我想把所有内容都放在我的slider.php

进入我的index.php

中找到的div框

我该怎么做?

SLIDER.PHP

<div class="slider">
<img id="1" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/001.png" />
<img id="2" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/002.png" />
<img id="3" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/003.png" />
<img id="4" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/004.png" />
<img id="5" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/005.png" />
<img id="6" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/006.png" />
<img id="7" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/007.png" />
<img id="8" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/008.png" />
<img id="9" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/009.png" />
<img id="10" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/010.png" />
<img id="11" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/011.png" />
<img id="12" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/012.png" />
<img id="13" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/013.png" />
<img id="14" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/014.png" />
<img id="15" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/015.png" />
<img id="16" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/016.png" />
<img id="17" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/017.png" />
<img id="18" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/018.png" />
<img id="19" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/019.png" />
<img id="20" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/020.png" />
<img id="21" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/021.png" />
<img id="22" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/022.png" />
<img id="23" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/023.png" />
<img id="24" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/024.png" />
<img id="25" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/025.png" />
<img id="26" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/026.png" />
<img id="27" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/027.png" />
<img id="28" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/028.png" />
<img id="29" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/029.png" />
<img id="30" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/030.png" />
<img id="31" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/031.png" />
<img id="32" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/032.png" />
<img id="33" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/033.png" />
<img id="34" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/034.png" />
<img id="35" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/035.png" />
<img id="36" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/036.png" />
<img id="37" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/037.png" />
<img id="38" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/038.png" />
<img id="39" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/039.png" />
<img id="40" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/040.png" />
<img id="41" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/041.png" />
<img id="42" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/042.png" />
<img id="43" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/043.png" />
<img id="44" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/044.png" />
<img id="45" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/045.png" />
<img id="46" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/046.png" />
<img id="47" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/047.png" />
<img id="48" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/048.png" />
<img id="49" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/049.png" />
<img id="50" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/050.png" />
<img id="61" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/061.png" />
<img id="62" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/062.png" />
<img id="63" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/063.png" />
<img id="64" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/064.png" />
<img id="65" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/065.png" />
<img id="66" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/066.png" />
<img id="67" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/067.png" />
<img id="68" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/068.png" />
<img id="69" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/069.png" />
<img id="70" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/070.png" />
<img id="71" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/071.png" />
<img id="72" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/072.png" />
<img id="73" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/073.png" />
<img id="74" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/074.png" />
<img id="75" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/075.png" />
<img id="76" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/076.png" />
<img id="77" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/077.png" />
<img id="78" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/078.png" />
<img id="79" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/079.png" />
<img id="80" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/080.png" />
<img id="81" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/081.png" />
<img id="82" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/082.png" />
<img id="83" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/083.png" />
<img id="84" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/084.png" />
<img id="85" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/085.png" />
<img id="86" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/086.png" />
<img id="87" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/087.png" />
<img id="88" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/088.png" />
<img id="89" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/089.png" />
<img id="90" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/090.png" />
<img id="91" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/091.png" />
<img id="92" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/092.png" />
<img id="93" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/093.png" />
<img id="94" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/094.png" />
<img id="95" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/095.png" />
<img id="96" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/096.png" />
<img id="97" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/097.png" />
<img id="98" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/098.png" />
<img id="99" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/099.png" />
<img id="100" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/Pokemon/100.png" />
<img id="101" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/101.png" />
<img id="102" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/102.png" />
<img id="103" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/103.png" />
<img id="104" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/104.png" />
<img id="105" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/105.png" />
<img id="106" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/106.png" />
<img id="107" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/107.png" />
<img id="108" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/108.png" />
<img id="109" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/109.png" />
<img id="110" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/110.png" />
<img id="111" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/111.png" />
<img id="112" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/112.png" />
<img id="113" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/113.png" />
<img id="114" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/114.png" />
<img id="115" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/115.png" />
<img id="116" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/116.png" />
<img id="117" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/117.png" />
<img id="118" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/118.png" />
<img id="119" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/119.png" />
<img id="120" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/120.png" />
<img id="121" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/121.png" />
<img id="122" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/122.png" />
<img id="123" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/123.png" />
<img id="124" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/124.png" />
<img id="125" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/125.png" />
<img id="126" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/126.png" />
<img id="127" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/127.png" />
<img id="128" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/128.png" />
<img id="129" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/129.png" />
<img id="130" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/130.png" />
<img id="131" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/131.png" />
<img id="132" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/132.png" />
<img id="133" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/133.png" />
<img id="134" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/134.png" />
<img id="135" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/135.png" />
<img id="136" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/136.png" />
<img id="137" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/137.png" />
<img id="138" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/138.png" />
<img id="139" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/139.png" />
<img id="140" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/140.png" />
<img id="141" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/141.png" />
<img id="142" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/142.png" />
<img id="143" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/143.png" />
<img id="144" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/144.png" />
<img id="145" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/145.png" />
<img id="146" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/146.png" />
<img id="147" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/147.png" />
<img id="148" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/148.png" />
<img id="149" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/149.png" />
<img id="150" src="http://www.gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/images/pokemon/150.png" />
</div>

我想要所有代码

复制并粘贴

在DIV内部“#SliderMobile”

并且

在DIV内部“#SliderPC”

两个DIVS都位于INDEX.PHP

的index.php

<div class="#SliderMobile"><?php include('slider.php'); ?></div>
<div class="#SliderPC"><?php include('slider.php'); ?></div>

我该怎么做?

编辑:

我尝试使用

<?php include('slider.php'); ?>

如果我使用ONCE

,它会起作用

但是

如果我使用TWICE

,它不起作用

如何将slider.php内容包含在两次以上?

(在index.php中的多个DIV中)?

编辑:

我不确定这些信息是否有用

但是

这是我的滑块脚本代码的Javascript

<script type="text/javascript"> 
$(document).ready(function() {

//$('.slider #1').show({right:'0'}, 500);
$('.slider #1').show('slide',{direction:'right'},500);
$('.slider #1').delay(5500).hide('slide',{direction:'left'},500);

var sliderTotalImg = $('.slider img').size();    
var counterIndex = 2;
var slidecount=150;

setInterval(function () {

    //$('.slider #' + counterIndex).show({right:'0'}, 500);
    $('.slider #' + counterIndex).show('slide',{direction:'right'},500);
    $('.slider #' + counterIndex).delay(5500).hide('slide',{direction:'left'},500);

    if(counterIndex==slidecount){
counterIndex=1;

}else{
counterIndex++;
}
},6500);});</script>

编辑:

这是我的index.php

如果您打开www.gohatchmyegg.com

我希望我的口袋妖怪滑块出现在

PC宽屏视口模式中的左上栏

移动视口模式中的右下角

调整窗口大小。

所以我试图将滑块包含两次。

slider.php应该包含在“.slider1”和“.slider2”DIV Box中

的index.php

<?php get_header(); ?>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="http://gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/css/style.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">  
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and
(max-width:980px)" href="http://gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/css/style_large.css">

<link rel="stylesheet" type="text/css" media="only screen and (min-width:600px) and
(max-width:767px)" href="http://gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/css/style_medium.css">

<link rel="stylesheet" type="text/css" media="only screen and (min-width:200px) and
(max-width:599px)" href="http://gohatchmyegg.com/wp-content/themes/GoHatchMyEgg/css/style_small.css">

</head>  

<div id="BodyContent">
<div id="SidebarLeft"><div id="SideBarLeftContent"><div class="slider1"><?php include $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/GoHatchMyEgg/slider.php'; ?>
</div></div></div><div id="MainText"><div id="MainTextBox"><div id="MainTextArticle"><?php query_posts('p=22' ); ?>
<?php if (have_posts()); ?>
<?php while ( have_posts() ) : the_post();?>
<?php
echo the_content();
endwhile; ?></div></div></div><div id="SidebarRight"><div id="SideBarRightContent"><div id="RightContent"><div id="YoutubeVideo"></div>

<div id="BottomRight"><div class="slider2"><?php include $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/GoHatchMyEgg/slider.php'; ?>    </div></div></div></div></div>
</div>

<?php get_footer(); ?>

2 个答案:

答案 0 :(得分:1)

当我需要添加两个相同的文件时,这总是对我有用。

<?php include $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/GoHatchMyEgg/slider.php'; ?>

答案 1 :(得分:0)

使用php插入文件。

        private static OkHttpClient.Builder httpClient = new OkHttpClient.Builder();
private static Retrofit.Builder builder =
        new Retrofit.Builder()
                .baseUrl(baseUrlWS)
                .addConverterFactory(GsonConverterFactory.create());
        String credentials = username + ":" + password;
        final String basic = "Basic " + Base64.encodeToString(credentials.getBytes(), Base64.NO_WRAP);

        httpClient.addInterceptor(new Interceptor() {
            @Override
            public okhttp3.Response intercept(Interceptor.Chain chain) throws IOException {
                Request original = chain.request();

                Request.Builder requestBuilder = original.newBuilder()
                        .header("Authorization", basic)
                        .header("Accept", "application/json")
                        .method(original.method(), original.body());
                Request request = requestBuilder.build();
                return chain.proceed(request);
            }
        });
      OkHttpClient client = httpClient.build();
    Retrofit retrofit = builder.client(client).build();
    // retrofit.create(serviceClass); aqui pego a instancia do serviço criada.