الكتابة تذهب بعيد عن الحد الخاص بها في المقال

عليك بتغيير موضع <div class="main-post"> ووضعه داخل <div class="col-md-6"> لضمان أن كل عنصر يعرض داخل الحاوية الصحيحة وداخل العمود المطلوب، وأيضًا إضافة عناصر <div class="row"> و <div class="col-md-12"> حول عنصر الـ "post-tags" لضمان التنسيق الصحيح لهذا العنصر أيضًا.

أي تعديل الكود للشكل التالي:

<?php get_header(); ?>


<div class="container">


    <div class="row">


    <?php
    if (have_posts()) {
        while (have_posts()) {
            the_post();
    ?>
    <div class="col-md-6">
        <div class="main-post">
            <h3 class="post-title">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </h3>
            <span class="post-author"><i class="fa fa-user" aria-hidden="true"></i><?php the_author_posts_link(); ?></span>
            <span class="post-date"><i class="fa fa-calendar" aria-hidden="true"></i><?php the_time(); ?></span>
            <span class="category">
                <i class="fa fa-tags" aria-hidden="true"></i>
                <?php the_category(','); ?>
            </span>
            <span class="post-comments">
                <i class="fa fa-comment" aria-hidden="true"></i>
                <?php comments_number(); ?>
            </span>
            <?php the_post_thumbnail('', ['class' => 'img-responsive img-thumbnail']) ?>
            <div class="post-content">
                <hr>
                <?php the_content(); ?>
            </div>
        </div>
    </div>
    <?php
        }
    }
    ?>


    </div>


    <div class="row">
        <div class="col-md-12">
            <p class="post-tags">
                <?php
                if (has_tag()) {
                    the_tags();
                } else {
                    echo 'There are no tags.';
                }
                if (get_previous_posts_link()) {
                    previous_posts_link('Prev');
                } else {
                    echo '<span class="previous-span">No previous page</span>';
                }
                if (get_next_posts_link()) {
                    next_posts_link('Next');
                } else {
                    echo '<span class="previous-span">No next page</span>';
                }
                ?>
            </p>
        </div>
    </div>


</div>


<?php get_footer(); ?>

وقد يفيدك الإطلاع على المستند الرسمي لإصدار Bootstrap الذي تستخدمه لرؤية هيكل الكود الصحيح.

يحدث هذا بسبب عدم وجود فراغات في النص، بالتالي يعتبرها المتصفح كلمة واحدة فيعرضها في سطر واحد. جرب هذا الكود (CSS) ليتم تقسيم الكلمات الطويلة:

.post-content {
    word-break: break-word;
}

يبدو أن المشكلة تتعلق بعرض المقالة داخل الـ div المحدد بالـ col-md-6 ولكنه يخرج منه. لحل المشكلة، يمكنك اتباع الخطوات التالية:

2- يمكنك تجربة استخدام الخاصية word-wrap لعنصر المقالة في css ، وذلك بإضافة الكود التالي:

  .post-content p{
    word-wrap: break-word;
  }

3- بدلاً من الخطوة السابقة، يمكنك تجربة تغيير الـ class الخاص بالـ div الذي يحتوي على المحتوى من col-md-6 إلى col-md-12، لجعل المحتوى يحتل المساحة الكاملة للـ div المحدد به.

  <div class="main-post">
    <div class="col-md-12">
      <!-- الكود الخاص بالمقالة هنا -->
    </div>
  </div>

أو يمكنك تغيير هيكل الكود الخاص بك على النحو التالي:

1. قم بنقل السطر <div class="main-post"> من داخل الحلقة while وضعه قبل بداية الحلقة. سيتم إغلاق هذا العنصر بعد الحلقة while لتشمل المحتوى الخاص بكل مقالة.

2. ضع السطر <div class="row"> قبل بداية الحلقة while والسطر </div> بعد نهاية الحلقة while. هذا سيضمن أن كل المقالات تظهر داخل صف واحد.

بمجرد قيامك بهذه التغييرات، ينبغي أن تظهر المقالات داخل المستطيل المحدد بشكل صحيح. هذا هو الكود المعدّل:

<?php get_header(); ?>

<div class="container">
  <div class="row">
    <div class="main-post">
      <?php
      if (have_posts()) {
        while (have_posts()) {
          the_post();
          ?>
          <div class="col-md-6">
            <h3 class="post-title">
              <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
              </a>
            </h3>
            <span class="post-author"><i class="fa fa-user" aria-hidden="true"></i><?php the_author_posts_link(); ?></span>
            <span class="post-date"><i class="fa fa-calendar" aria-hidden="true"></i><?php the_time(); ?></span>
            <span class="category">
              <i class="fa fa-tags" aria-hidden="true"></i>
              <?php the_category(','); ?>
            </span>
            <span class="post-comments">
              <i class="fa fa-comment" aria-hidden="true"></i>
            </span>
            <?php the_post_thumbnail('', ['class' => 'img-responsive img-thumbnail']) ?>
            <p class="post-content">
              <hr>
              <?php the_content(); ?>
            </p>
          </div>
        <?php
        }
      }
      ?>
    </div>
  </div>
  <p class="post-tags">
    <?php
    if (has_tag()) {
      the_tags();
    } else {
      echo 'There are no tags.';
    }

    if (get_previous_posts_link()) {
      previous_posts_link('prev');
    } else {
      echo '<span class="previous-span">No previous page</span>';
    }