Создать из 3х 4 колонки в адаптивном шаблоне Wordpress?

Question

[Чёкатилло]

Здравствуйте ребята! ))) Подскажите пожалуйста )
-каким способом можно дополнить уже имеющиеся 3 колонки в шаблоне Вордпресс 4ой?
-количество колонок регулируется только средствами css?

Код php секции постов с колонками:

<?php endif; ?>
	<?php if ( have_posts() ) : ?>
		<div id="posts-wrapper">
		<?php while ( have_posts() ) : the_post(); ?>
			<?php get_template_part( 'format', get_post_format() ); ?>
		<?php endwhile; ?>
		</div>
		<div id="gutter-sizer"></div>

И код css:

#gutter-sizer {
  width: 0;
  height: 0;
  box-sizing: content-box; }
  @media screen and (min-width: 800px) {
    #gutter-sizer {
      width: 2.5%; }
      [data-layout="sticky-column"] #gutter-sizer {
        width: 3% !important; } }

#posts-wrapper {
  position: relative;
  box-sizing: content-box; }
  #posts-wrapper .masonry-post {
    background-color: #fff;
    margin-bottom: 30px;
    padding: 30px;
    padding: 3rem; }
    #posts-wrapper .masonry-post:not(.unit) {
      width: 100%; }
    @media screen and (min-width: 800px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    @media screen and (min-width: 1100px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 31.66667%; } }
    @media screen and (min-width: 800px) {
      [data-layout="2-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    body:not(.has-background) #posts-wrapper .masonry-post {
      border: 1px solid #c2c2c2; }

@media screen and (min-width: 800px) {
  [data-layout="sticky-column"] #posts-wrapper .masonry-post {
    width: 31.66667%; } }
@media screen and (min-width: 1100px) {
  [data-layout="sticky-column"] #posts-wrapper .sticky.masonry-post:first-of-type {
    width: 65.83% !important; } }

Answer 1

[Чёкатилло]

Не затрагивая php/html решилось в css след. образом:

#gutter-sizer {
  width: 0;
  height: 0;
  box-sizing: content-box; }
@media screen and (min-width: 480px) {
    #gutter-sizer {
      width: 2.1%; }
      [data-layout="sticky-column"] #gutter-sizer {
        width: 3% !important; } }

#posts-wrapper {
  top: 30px;
  top: 3rem;
  bottom: 30px;
  bottom: 3rem;
  position: relative;
  box-sizing: content-box;}
#posts-wrapper .masonry-post {
    background-color: #edf0dd;
    margin-bottom: 30px;
    padding: 30px;
    padding: 3rem; }
       #posts-wrapper .masonry-post:not(.unit) {
      width: 100%; }
    @media screen and (min-width: 480px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    @media screen and (min-width: 800px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 31.66667%; } }
    @media screen and (min-width: 1100px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 23.39877%; } }
    @media screen and (min-width: 480px) {
      [data-layout="2-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    body:not(.has-background) #posts-wrapper .masonry-post {
      border: 1px solid #edf0dd; }
31.66667
@media screen and (min-width: 480px) {
  [data-layout="sticky-column"] #posts-wrapper .masonry-post {
    width: 31.66667%; } }
@media screen and (min-width: 800px) {
  [data-layout="sticky-column"] #posts-wrapper .sticky.masonry-post:first-of-type {
    width: 65.83% !important; } }

Answer 2

[Борис Якушев]

-количество колонок регулируется только средствами css?

Количество колонок на странице зависит от вашего html файла.

Вашу простынь разбейте отдельно на код, и отдельно на текст, читать не удобно.

Comments

[Чёкатилло]

ОК
Код php секции постов с колонками:

<?php endif; ?>
	<?php if ( have_posts() ) : ?>
		<div id="posts-wrapper">
		<?php while ( have_posts() ) : the_post(); ?>
			<?php get_template_part( 'format', get_post_format() ); ?>
		<?php endwhile; ?>
		</div>
		<div id="gutter-sizer"></div>

И код css:

#gutter-sizer {
  width: 0;
  height: 0;
  box-sizing: content-box; }
  @media screen and (min-width: 800px) {
    #gutter-sizer {
      width: 2.5%; }
      [data-layout="sticky-column"] #gutter-sizer {
        width: 3% !important; } }

#posts-wrapper {
  position: relative;
  box-sizing: content-box; }
  #posts-wrapper .masonry-post {
    background-color: #fff;
    margin-bottom: 30px;
    padding: 30px;
    padding: 3rem; }
    #posts-wrapper .masonry-post:not(.unit) {
      width: 100%; }
    @media screen and (min-width: 800px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    @media screen and (min-width: 1100px) {
      [data-layout="3-column"] #posts-wrapper .masonry-post {
        width: 31.66667%; } }
    @media screen and (min-width: 800px) {
      [data-layout="2-column"] #posts-wrapper .masonry-post {
        width: 48.7%; } }
    body:not(.has-background) #posts-wrapper .masonry-post {
      border: 1px solid #c2c2c2; }

@media screen and (min-width: 800px) {
  [data-layout="sticky-column"] #posts-wrapper .masonry-post {
    width: 31.66667%; } }
@media screen and (min-width: 1100px) {
  [data-layout="sticky-column"] #posts-wrapper .sticky.masonry-post:first-of-type {
    width: 65.83% !important; } }