2014-12-31 2 views
0

Итак, я создал wordpress, и на этом Wordpress я создал собственный шаблон.Плагины или текст НЕ отображаются на пользовательском шаблоне Wordpress

Пользовательский шаблон отображается хорошо, но когда я пытаюсь добавить плагины или текст в свой пользовательский шаблон с помощью панели инструментов Wordpress, ничего не появляется. Это не добавление его в код или добавление его на страницу.

Ниже приведены некоторые примеры того, что я имею в виду.

Это WordPress панель, где я добавляю в, как вы можете видеть мой шаблон является MainTest, который я сделал сам и работает отлично

SS of the Wordpress Dashboard

enter image description here

Теперь это С.С. страница, Как вы можете видеть, слова test test test нигде не отображаются.

This is the SS of the page

enter image description here

Вот код шаблона страницы MaintTest

<?php 
    /* 
     Template Name: MainTest 
    */ 
    ?> 

    <!DOCTYPE html> 

    <html> 

    <head> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <link rel="stylesheet" href="wp-content/themes/iribbon/newaddons/animate.css"> 
     <link rel="stylesheet" type="text/css" href="wp-content/themes/iribbon/newaddons/newstyle.css"> 
     <script type='text/javascript' src='rotate.js'></script> 
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
     <link rel="stylesheet" href="Fancy/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> 
     <script type="text/javascript" src="Fancy/source/jquery.fancybox.pack.js?v=2.1.5"></script> 

    </head> 
    <body> 

     <div class='container-fill'> 
      <?php include 'wp-content/themes/iribbon/newaddons/header.php'; ?> 
      <?php include 'wp-content/themes/iribbon/newaddons/footer.php'; ?>    
     </div> 

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

     </body> 
     </html> 

А вот CSS, который контролирует его. Да, я понимаю, что мой CSS выглядит неряшливо.

#midbar { 
    background-color: #FFFFFF; 
    height: 115px; 
    margin: 0 auto; 
    opacity: 0.9; 
    position: relative; 
    top: 0px; 
    width: 1200px; 
    z-index: 1111; 
    } 

    #midbar img { 
    position: absolute; 
    top: -20px; 
    left:50%; 
    margin-left: -160px; 
    width: 300px; 
    height: 200px; 
    min-height: 50px; 
    min-width: 250px; 
    vertical-align: middle; 
    z-index: 2222; 
    opacity:4.0; 
    } 


    .top { 
    position: relative; 
    top: -20px; 
    width: 100%; 
    height: 115px; 
    background-color: #FFFFFF; 
    z-index: 3333; 
    opacity: 0.9; 
    margin: 0 auto; 
    width: 100%; 
    } 

    #navigation { 
    border-bottom-style: dotted; 
    border-top-style: dotted; 
    border-width: 2px; 
    left: 0; 
    position: absolute; 
    top: 45px; 
    } 

    #navigation ul li { 
    position: relative; 
    display:inline-block; 


    margin:0 23px 0 0; 


    z-index: 3333; 
    } 
    #navigation ul li a  { 
    padding-left:15px; 
    text-decoration: none; 
    text-align: center; 
     padding-right:15px; 
    color:#000000; 
    display:block; 
    font-family: 'Gentium Book Basic', serif; 
    font-size:18px; 
    } 

    #navi { 
    border-bottom-style: dotted; 
    border-top-style: dotted; 
    border-width: 2px; 
    position: absolute; 
    right: 0; 
    top: 45px; 
    } 

    #navi ul li { 
    position: relative; 
    display:inline-block; 
    margin:0 23px 0 0; 
    z-index: 3333; 
    } 
    #navi ul li a { 
    padding-left:15px; 
    text-decoration: none; 
    text-align: center; 
     padding-right:15px; 
    color:#000000; 
    display:block; 
    font-family: 'Gentium Book Basic', serif; 
    font-size:18px; 
    } 

    #slideshow{ 
    width: 100%; 
    height: 100%; 
    } 

    #slideshow{ 
    -webkit-animation: cssAnimation 8s 16 ease-in-out; 
    -moz-animation: cssAnimation 8s 16 ease-in-out; 
    -o-animation: cssAnimation 8s 16 ease-in-out; 
    } 
    @-webkit-keyframes cssAnimation { 
    from { -webkit-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); } 
    to { -webkit-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); } 
    } 
    @-moz-keyframes cssAnimation { 
    from { -moz-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); } 
    to { -moz-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); } 
    } 
    @-o-keyframes cssAnimation { 
    from { -o-transform: rotate(0deg) scale(1.1) skew(1deg) translate(0px); } 
    to { -o-transform: rotate(0deg) scale(1.3) skew(1deg) translate(0px); } 
    } 


    #imgholder { 
    position: relative; 
    top: -150px; 
    width: 100%; 
    height: 500px; 
    overflow: hidden; 
    } 

    #social { 
    position: relative; 
    width: 20%; 
    top: 30px; 
    margin-left: auto; 
    margin-right: auto; 
    } 

    #social .fb { 
    position: relative; 
    left: -5%; 
    } 

    #social .pin { 
    position: relative; 
    left: 0%; 
    } 

    #social .tweet{ 
    position: relative; 
    left: 5%; 
    } 
    #foot { 
    width: 100%; 
    height: 200px; 
    position: absolute; 
    margin-right: auto; 
    margin-left: auto; 
    bottom: 0; 
    background-color: #FFFFFF; 
    margin:0; 
    text-align: center; 
    font-size: 12px;  
    } 

    #pics { 
    width: 100%; 
    height: 300px; 
    position: relative; 
    top: -100px; 
    margin-right: auto; 
    margin-left: auto; 
    } 

    #pics .ball { 
    position: relative; 
    vertical-align: middle; 
    left: 140px; 
    border: 2px solid #03acfb; 
    box-shadow: 0 8px 6px -4px #000000; 
    } 

    #pics .light { 

    position: relative; 
    left:165px; 
    vertical-align: middle; 
    border: 2px solid #03acfb; 
    box-shadow: 0 8px 6px -4px #000000; 
    } 

    #pics .car { 

    position: relative; 
    left: 190px; 
    vertical-align: middle; 
    border: 2px solid #03acfb; 
    box-shadow: 0 8px 6px -4px #000000; 
    } 

    #piccon { 
    width: 1400px; 
    height: 300px; 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
    min-width: 800px; 

    } 

    #rotating-item-wrapper { 
    position: absolute; 
    width: 1940px; 
    height: 347px; 
    top: 60px; 
    z-index: 8888; 
    left: 0; 
    } 
    .rotating-item { 
    display: none; 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 

    body { 
    overflow: hidden; 
    } 
    #mainabout img { 
    width: 100%; 
    height: 100%; 
    } 

    #maintext {  
    width: 800px; 
    min-width: 300px; 
    height: 600px; 
    min-height: 300px; 
    position: absolute; 
    top: 175px; 
    left: 40%; 
    margin-right: -250px; 
    text-align: center; 
    font-size: 18px; 
    } 
    #mainabout { 
    background-color: green; 
    position: absolute; 
    left: 40%; 
    margin-left: -650px; 
    top: 155px; 
    width: 600px; 
    height: 500px; 
    min-height: 600px; 

    } 
    .hidden { 
     display: none; 
    } 

    .images { 
    width: 50%; 
    position: relative; 
    top: 300px; 
    height: 300px; 
    display: block; 

    } 
    .images img {  
    width: 30%; 
    height: 60%; 
    } 

Обратите внимание, что css контролирует больше, чем только эту страницу, поэтому в нем так много.

+0

Добро пожаловать в Stackoverflow. Пожалуйста, введите код, например, index.php вашего wordpress или page.php, на свой пост. Без этого это просто дикая догадка о том, что пошло не так. –

+0

Хорошо, делаю это сейчас.Извините –

+0

@FrisovanDijk Я добавил, что страница MainTest php и html также добавила css для просмотра –

ответ

0

Причина, по которой не отображается содержимое, заключается в том, что вы не включаете цикл в свой html-элемент. См. Код для получения дополнительной информации: http://codex.wordpress.org/The_Loop

Вот пример с презентацией, отделенной от логики, которая позволит вам иметь больше контроля над DOM.

<body> 
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> 

    <!-- This will output the title of your page--> 
    <div class="page-header"> 
     <h1><?php the_title(); ?></h1> 
    </div> 

    <!-- the_content() function is required to output "test test test" --> 
    <?php the_content(); ?> 

    <?php endwhile; else: ?> 

    <!-- If there is an error, this 404 message will be displayed--> 
    <div class="page-header"> 
     <h1>Oh no!</h1> 
    </div> 

    <p>No content is appearing for this page!</p> 

<?php endif; ?> 
</body> 

Кроме того, вы должны называть свой верхний и нижний колонтитулы со следующими функциями:

Заголовок:http://codex.wordpress.org/Function_Reference/get_header

<?php get_header(); ?> 

Footer:http://codex.wordpress.org/Function_Reference/get_footer

<?php get_footer(); ?> 
+0

Итак, как это будет работать с элементами страницы, потому что там не показывается. –

+0

@RoxyMiles Что вы подразумеваете под элементами страницы? Как изображения? Все, что вы помещаете в свой редактор, должно отображаться на странице, если у вас нет проблемы с вашим css. –

+0

вот что я имею в виду. Ни один из этих элементов не появляется http://imgur.com/7W5hWZr –

0

Вы должны добавить цикл, чтобы получить то, что должно быть на странице. Он также указан как The Loop. Ниже самый простой пример: покажите контент или скажите, что страница не найдена.

Вставьте это между верхним и нижним колонтитулом, и все должно быть в порядке.

<?php 
    if (have_posts()) : while (have_posts()) : the_post(); 
    the_content(); 
    endwhile; else: 
    print('<p>Sorry, this page couldn`t be found.</p>'); 
    endif; 
    ?> 
+0

Так как это будет работать с элементами страницы, потому что там тоже не показывается. –