Kommentarbereich in Inhaltsbereich verschieben

Question

Hinweis: Am Ende dieses Posts habe ich gerade ein Update hinzugefügt. Die Kommentare im Update können einige Teile des ursprünglichen Beitrags überflüssig machen. Schließlich möchte ich einen Kommentarabschnitt auf allen meinen Seiten haben. Im Moment habe ich auf einigen Seiten nur Kommentare aktiviert.

Ich habe keine Kommentare auf dieser Seite aktiviert http://www.rosstheexplorer.com/how-to-back-up-photos-when-abroad/

ich die Kommentare auf dieser Seite aktiviert tun haben http://www.rosstheexplorer.com/blue-moutnains-and-katoomba-nsw/

Wenn ich Kommentare der FB-Plugin bewegt sich von der rechten Seite des Bildschirms nach unten aktivieren von Die Seite. Wie kann ich das verhindern? Ich änderte die Breite des Kommentarbereichs und ließ den Kommentarbereich nach links schweben, und das löste mein Problem nicht. Ich habe auch den "clear: both" -Text losgeworden und das hat das Problem nicht gelöst. Ich habe jetzt den Text "clear: both" wieder in meinen Code eingefügt.

Wenn keine Kommentare vorhanden sind, befindet sich der Widget-Bereich innerhalb des Site-Inhalts.

Wenn es Kommentare der Widget-Bereich bewegt wird. Wie kann ich das verhindern? Ist das das Problem?

Hat jemand irgendwelche Vorschläge?

Der Code Kommentarbereich ist

`/* =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; 
} 

Die index.php Code

<?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(); ?> 

Der comments.php Code ist

<?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 - ich den Boden der veränderte Index .php

<?php get_sidebar(); ?> 

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

<?php get_footer(); ?> 

Dann habe ich mich mit dem Kommentarbereich in den IE-Entwicklertools herumgesprochen. Es wurde deutlich, dass der Kommentarbereich Teil der Seitenleiste bzw. des Widgetbereichs war. Wenn ich die Breite des Kommentarbereichs auf 200px änderte, bewegte es sich auf die rechte Seite des Inhalts und nicht darunter.

Dann mit IE-Entwickler-Tools habe ich den Kommentarbereich verschoben, so dass es im Inhalt - Bereich geschachtelt wurde. Dann erschienen sowohl der Kommentarbereich als auch das FB-Plugin, wie ich sie erscheinen lassen wollte.

Wie ändere ich meinen Code, damit der Kommentarbereich dauerhaft im Inhaltsbereich verschachtelt wird?

Answer 1

Der Widgetbereich der Vorlage, die Sie verwenden, wird unterhalb der Kommentare festgelegt. Anstatt sich auf das Verschieben der Kommentare zu konzentrieren, möchten Sie vielleicht die Vorlagenstruktur erkunden, in der sich der Widget-Bereich befindet.

Im CSS ich diesen Code für das Widget Bereich sehen:

.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; 
    } 
} 

Sie sagte:

beide Dann wird der Kommentarbereich und FB-Plugin erschienen, wie ich sie erscheinen wollte.

Haben Sie einen Screenshot, wie sie angezeigt werden sollen? Es wird sicherlich helfen, einen Workaround zu finden.

Answer 2

Ich arbeitete die blaue Berge-Seite aus, die die page.php Schablonendatei als Gegensatz zur index.php-Datei verwendete.

Dann, nach vielen Experimenten habe ich es durch Veränderung der Boden der page.php Vorlagendatei an die unten

Vor den Änderungen arbeiten die sidebar.php war außerhalb des primären div und der Code auf die damit verbundene Kommentare waren in der primären div. Diese

ist, was der Code sieht aus wie nach der Modifikation

<?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

ich den Code geändert Sie auf dem Laufenden. Ich habe das schließende Tag hinzugefügt und den Kommentar-Code darüber verschoben. Dort musst du es so platzieren, dass es dieselbe Breite wie das primäre div hat.

Auch get_sidebar rendert ein sekundäres div, das Seite-an-Seite mit dem primären div sitzen muss, damit es daneben schwebt. Ich benutzte Firebug, um den Code zu modifizieren, und fügte einen Screenshot hinzu, um zu verdeutlichen, dass es genau das ist, wonach Sie suchen.

<?php 

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

    </main> 

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

<?php get_sidebar(); ?> 

<?php get_footer(); ?>