Переместить область комментариев в контентную область

Question

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

У меня нет комментариев активированные на этой странице http://www.rosstheexplorer.com/how-to-back-up-photos-when-abroad/

У меня есть комментарии активированные на этой странице http://www.rosstheexplorer.com/blue-moutnains-and-katoomba-nsw/

Когда я активировать комментарии плагина перемещает FB с правой стороны экрана в нижней части страница. Как я могу это предотвратить? Я изменил ширину области комментариев и получил область комментариев, чтобы плавать влево, и это не решило мою проблему. Я также избавился от текста «clear: both», и это не решило проблему. Теперь я вернул текст «clear: both» в свой код.

Когда комментариев нет, виджет-область находится внутри контента сайта.

Когда есть комментарии область виджета получает переехавшие. Как я могу это предотвратить? Это вызывает проблему?

Кто-нибудь есть какие-либо предложения?

Код комментарий площадь

`/* =Comments */ 

.comments-area { 
margin: 24px auto 0; 
border-top: 3px solid #eee; 
} 

.comments-title, 
#respond h3 { 
font-size: 1.2em; 
line-height: 1.36em; 
color: #999; 
} 
.comments-title small, 
.comment-reply-title small { 
float: right; 
} 

.comment-list, 
.comment-list .children { 
list-style: none; 
} 

.comment-list { 
margin: 0; 
} 

.comment-list > .comment:first-of-type { 
padding-top: 0; 
border-top: 0; 
} 

.comment { 
margin-top: 26px; 
padding-top: 27px; 
border-top: 1px solid #eee; 
} 

.comment-meta { 
text-transform: uppercase; 
} 
.comment-meta a { 
color: #666; 
} 
.comment-meta .comment-author img { 
float: left; 
border-radius: 50%; 
} 
.comment-meta .comment-author .fn { 
display: block; 
font-weight: normal; 
margin-left: 74px; 
text-transform: none; 
} 
.bypostauthor > article .fn:after { 
content: "\f304"; 
font-size: 16px; 
left: 3px; 
position: relative; 
top: -5px; 
} 
.comment-meta .comment-metadata { 
font-size: .8125em; 
font-weight: normal; 
line-height: 2.09231em; 
margin-bottom: 27px; 
margin-left: 74px; 
letter-spacing: 1px; 
color: #999; 
} 
.comment-meta .comment-metadata a { 
color: #999; 
} 
.comment-meta .comment-metadata a:hover { 
color: #1c7c7c; 
} 

.comments-area .edit-link:before { 
display: inline; 
margin: 0 7px; 
content: ' ~ '; 
} 

.comment-form label { 
display: inline-block; 
width: 109px; 
} 

.required { 
color: #1c7c7c; 
} 

.comment-form-author, 
.comment-form-email, 
.comment-form-url, 
.comment-form-comment { 
position: relative; 
margin: 0 0 27px; 
} 
.comment-form-author label, 
.comment-form-email label, 
.comment-form-url label, 
.comment-form-comment label { 
font-size: .8125em; 
font-weight: normal; 
line-height: 2.09231em; 
position: absolute; 
top: 7px; 
left: 0; 
padding: 7px 14px; 
letter-spacing: 1px; 
text-transform: uppercase; 
} 
.comment-form-author input, 
.comment-form-email input, 
.comment-form-url input, 
.comment-form-comment input { 
display: block; 
clear: both; 
width: 100%; 
margin: 0 0 27px; 
padding-left: 100px; 
} 
.comment-form-author textarea, 
.comment-form-email textarea, 
.comment-form-url textarea, 
.comment-form-comment textarea { 

width: 100%; 
margin: 0 0 27px; 
padding: 54px 14px 7px; 
} 

.says { 
display: none; 
} 

.form-allowed-tags { 
color: #999; 
} 

.no-comments { 
font-style: italic; 
margin: 27px 0; 
text-align: center; 
color: #999; 
} 

код index.php является

<?php 
/** 
* The main template file. 

* 
* 
* @package Penscratch 
*/ 

get_header(); ?> 

    <div id="primary" class="content-area"> 
     <main id="main" class="site-main" role="main"> 



     <?php if (have_posts()) : ?> 

      <?php /* Start the Loop */ ?> 
      <?php while (have_posts()) : the_post(); ?> 

       <?php 
        /* Include the Post-Format-specific template for the content. 
        * If you want to override this in a child theme, then include a file 
        * called content-___.php (where ___ is the Post Format name) and that will be used instead. 
        */ 
        get_template_part('content', get_post_format()); 
       ?> 

      <?php endwhile; ?> 

      <?php penscratch_paging_nav(); ?> 

     <?php else : ?> 

      <?php get_template_part('content', 'none'); ?> 

     <?php endif; ?> 

     </main><!-- #main --> 
    </div><!-- #primary --> 

<?php get_sidebar(); ?> 
<?php get_footer(); ?> 

Код comments.php является

<?php 
/** 
* The template for displaying Comments. 
* 
* The area of the page that contains both current comments 
* and the comment form. 
* 
* @package Penscratch 
*/ 

/* 
* If the current post is protected by a password and 
* the visitor has not yet entered the password we will 
* return early without loading the comments. 
*/ 
if (post_password_required()) { 
    return; 
} 
?> 

<div id="comments" class="comments-area"> 



    <?php // You can start editing here -- including this comment! ?> 

    <?php if (have_comments()) : ?> 
     <h2 class="comments-title"> 
      <?php 
       printf(_nx('One thought on &ldquo;%2$s&rdquo;', '%1$s thoughts on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', 'penscratch'), 
        number_format_i18n(get_comments_number()), '<span>' . get_the_title() . '</span>'); 
      ?> 
     </h2> 

     <?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // are there comments to navigate through ?> 
     <nav id="comment-nav-above" class="comment-navigation" role="navigation"> 
      <h1 class="screen-reader-text"><?php _e('Comment navigation', 'penscratch'); ?></h1> 
      <div class="nav-previous"><?php previous_comments_link(__('< Older Comments', 'penscratch')); ?></div> 
      <div class="nav-next"><?php next_comments_link(__('Newer Comments >', 'penscratch')); ?></div> 
     </nav><!-- #comment-nav-above --> 
     <?php endif; // check for comment navigation ?> 

     <ol class="comment-list"> 
      <?php 
       wp_list_comments(array(
        'style'  => 'ol', 
        'short_ping' => true, 
        'avatar_size' => 60 
       )); 
      ?> 
     </ol><!-- .comment-list --> 

     <?php if (get_comment_pages_count() > 1 && get_option('page_comments')) : // are there comments to navigate through ?> 
     <nav id="comment-nav-below" class="comment-navigation" role="navigation"> 
      <h1 class="screen-reader-text"><?php _e('Comment navigation', 'penscratch'); ?></h1> 
      <div class="nav-previous"><?php previous_comments_link(__('< Older Comments', 'penscratch')); ?></div> 
      <div class="nav-next"><?php next_comments_link(__('Newer Comments >', 'penscratch')); ?></div> 
     </nav><!-- #comment-nav-below --> 
     <?php endif; // check for comment navigation ?> 

    <?php endif; // have_comments() ?> 

    <?php 
     // If comments are closed and there are comments, let's leave a little note, shall we? 
     if (! comments_open() && '0' != get_comments_number() && post_type_supports(get_post_type(), 'comments')) : 
    ?> 
     <p class="no-comments"><?php _e('Comments are closed.', 'penscratch'); ?></p> 
    <?php endif; ?> 

    <?php comment_form(); ?> 



</div><!-- #comments --> 

UPDATE - я изменил Дно индекс .php

<?php get_sidebar(); ?> 

</div><!-- #primary --> 

<?php get_footer(); ?> 

Затем я столкнулся с областью комментариев в инструментах разработчика IE. Стало очевидно, что область комментариев была частью боковой панели и/или области виджета. Когда я изменил ширину области комментариев на 200 пикселей, она переместилась в правую часть содержимого, а не под ним.

Затем, используя инструменты разработчика IE, я переместил область комментариев так, чтобы она была вложена в область содержимого. Затем появилась область комментариев и плагин FB, как я хотел, чтобы они появились.

Как изменить код, чтобы область комментариев была постоянно вложена в область содержимого?

Answer 1

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

В CSS я вижу этот код области виджета:

.site-content .widget-area { 
    margin-top: 27px; 
    padding-top: 24px; 
    border-top: 3px solid #eee; 
} 
@media screen and (min-width: 50em) { 
    .site-content .widget-area { 
     float: right; 
     overflow: hidden; 
     width: 28%; 
     margin-top: 0; 
     padding-top: 0; 
     border-top: 0; 
    } 
} 

Вы сказали:

Тогда как комментарий область и FB плагин появился, как я хотел, чтобы они появляются.

У вас есть скриншот о том, как вы хотите, чтобы они появились? Это, безусловно, поможет найти работу.

Answer 2

Я разработал страницу с синими горами, используя файл шаблона page.php, как против файла index.php.

Затем после многих экспериментов я получил это работает за счет изменения в нижней части файла шаблона page.php к ниже

Перед модификациями sidebar.php находился вне основного DIV и кода связана с комментарии были внутри первичного div.

Это то, что код выглядит после модификации

<?php get_sidebar(); ?> 

</div><!-- #primary --> 

<?php 
        // If comments are open or we have at least one comment, load up the comment template 
        if (comments_open() || '0' != get_comments_number()) : 
         comments_template(); 
        endif; 
       ?> 



<?php get_footer(); ?> 

Answer 3

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

Также get_sidebar предоставляет дополнительный div, который должен сидеть бок о бок с основным div, чтобы он плавал рядом с ним. Я использовал firebug, чтобы изменить код и приложить скриншот, чтобы уточнить, что вы ищете.

<?php 

if (comments_open() || '0' != get_comments_number()) : 
comments_template(); 
endif; 
?> 

    </main> 

</div><!-- #primary --> 

<?php get_sidebar(); ?> 

<?php get_footer(); ?>