litash

https://codepen.io/anon/pen/pKVYoQ

Если записывать данные в массив, то будет еще проще и удобнее.
https://codepen.io/anon/pen/vrjPOg

Понадобятся два свойства - массив имён компонентов и имя выбранного в данный момент компонента:

data: () => ({
  items: [ 'имя-компонента-1', 'имя-компонента-2', 'имя-компонента-3' ],
  selected: null,
}),

На основе массива с именами создаётся список, элементам которого назначается обработчик клика, устанавливающий текущее имя компонента в качестве выбранного:

<li
  v-for="n in items"
  v-text="n"
  @click="selected = n"
></li>

Если что-то выбрано, рендерим это что-то:

<component v-if="selected" :is="selected"></component>

<div class="tab-headers">
  <button data-id="1">69</button>
  <button data-id="2">187</button>
  <button data-id="3">666</button>
</div>

<div class="tab-contents">
  <div data-id="1">hello, world!!</div>
  <div data-id="2">fuck the world</div>
  <div data-id="3">fuck everything</div>
</div>

.tab-contents div {
  display: none;
}

.tab-contents div.active {
  display: block;
}

.tab-headers button.active {
  background: red;
  color: white;
}

const headerSelector = '.tab-headers button';
const contentSelector = '.tab-contents div';
const activeClass = 'active';


// делегирование, назначаем обработчик клика один раз для всех кнопок;
// соответствие кнопок и блоков устанавливаем через равенство атрибутов
document.addEventListener('click', e => {
  const header = e.target.closest(headerSelector);
  if (header) {
    const { id } = header.dataset;
    const toggle = n => n.classList.toggle(activeClass, id === n.dataset.id);
    document.querySelectorAll(headerSelector).forEach(toggle);
    document.querySelectorAll(contentSelector).forEach(toggle);
  }
});

// или, назначаем обработчик клика каждой кнопке индивидуально;
// соответствие кнопок и блоков устанавливаем через равенство индексов
const headers = document.querySelectorAll(headerSelector);
const contents = document.querySelectorAll(contentSelector);

headers.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(headers, this);
  const toggle = (n, i) => n.classList.toggle(activeClass, i === index);
  headers.forEach(toggle);
  contents.forEach(toggle);
}

На примере bootstrap.
Стили бустрапа подключаете непосредственно в вашем scss.
Js бутстрапа подключаете в gulp:

const gulp              = require('gulp'),
      sass              = require('gulp-sass'),
      concat            = require('gulp-concat'),
      hb                = require('gulp-hb'),
      rename            = require('gulp-rename'),
      changed           = require('gulp-changed'),
      print             = require('gulp-print'),
      path              = require('path'),
      browserSync       = require('browser-sync').create(),
      runSequence       = require('run-sequence'),
      fs                = require('fs'),
      del               = require('del'),
      handlebarsLayouts = require('handlebars-layouts');

const DIR_ROOT   = fs.realpathSync('./'),
      DIR_SRC    = DIR_ROOT + '/src',
      DIR_PUBLIC = DIR_ROOT + '/public',
      DIR_DIST   = DIR_PUBLIC + '/dist';


gulp.task('js-libs', function() {
    return gulp.src([
                   './node_modules/jquery/dist/jquery.min.js',
                   './node_modules/tether/dist/js/tether.min.js',
                   './node_modules/popper.js/dist/umd/popper.js',
                   './node_modules/путь к 4 бустрапу/bootstrap.min.js'
               ])
               .pipe(concat('libs.js'))
               .pipe(gulp.dest(DIR_DIST + '/js/'))
               .pipe(browserSync.stream());
});

gulp.task('js-template', function() {
    return gulp.src([
                   DIR_SRC + '/index.js'
               ])
               .pipe(concat('index.js'))
               .pipe(gulp.dest(DIR_DIST + '/js/'))
               .pipe(browserSync.stream());
});

gulp.task('scripts', function() {
    runSequence('js-libs', 'js-template');
});

gulp.task('fonts-awesome', function() {
    return gulp.src(['./node_modules/font-awesome/fonts/*'])
               .pipe(gulp.dest(DIR_DIST + '/fonts/'))
               .pipe(browserSync.stream());
});

gulp.task('fonts', function() {
    runSequence('fonts-awesome');
});

gulp.task('build-cleanup', function() {
    return del.sync(DIR_PUBLIC);
});
gulp.task('build-all', [   
    'fonts',
    'scripts'
]);
gulp.task('build', function() {
    return runSequence(
        'build-cleanup',
        'build-all'
    );
});

gulp.task('serve', function() {
    browserSync.init({
        localOnly : true,
        port      : 8080,
        server    : {
            baseDir : DIR_PUBLIC
        },
        ui        : {
            port : 8081
        }
    });
    
    gulp.watch(DIR_SRC + '/scripts/**/*', ['scripts']);});

gulp.task('watch', function() {
    runSequence(
        'build',
        'serve'
    );
});

Примерно так

Портретный от альбомного отличается только соотношением сторон, поэтому лучше всего обнаруживать смену при событии resize
Вот, например
https://jsfiddle.net/6t6fbkcy/7/

Натолкнет на рассуждения: https://medium.com/@andybarefoot/a-masonry-style-l...

оно? Как настроить редактор atom?

Отлавливайте событие mousewheel.
Решение: https://jsfiddle.net/FL3N/wxnhn8fe/

Довольно странный вопрос...

Независимо от того, как рубрика называется вы можете вывести ее на сайте через меню. Ответственными за вывод архива записей являются шаблоны archive.php || category.php

Если речь идет о выводе рубрики через код (с другой структурой вывода записей например), то например. можно создать доп. шаблоны archive.php || category.php и вывести все это дело там. Для вывода используйте WP_Query (не query_posts). Документация доступна в кодексе и на wp-kama

Или же можете вывести все через плагины. Плагинов очень много.
Content Views
Post Grid
Essential Grid
Visual Composer и т.д.

export default class Request extends Component {
	constructor() {
  	super();
  	this.state = { 
  		checked: false
  	}
  	this.handleClick = this.handleClick.bind(this);
 	}
  
  this.handleClick() {
  	this.setState({
  		checked: !this.state.checked
  	})
  }
 	
 	render() {
 		const {checked} = this.state

  	return (
   		<div class="block" onClick={ this.handleClick } role="button" tabIndex={ 0 }>
   			<input type="radio" name="radio" id="radio" checked={checked}/>
  	 	</div>
  	);
 	}
}

https://codepen.io/anon/pen/RgOzZj

this.handleClick() {
    var element = getElementsByClassName('')
element.setAttribute('background-color ', 'red');
  }

еще можно использовать флаг примерно так

constructor() {
    super();
    
    this.state = { 
flag:false,
 }

  }
this.handleClick() {
    this.setState({
        flag:true
    })
  }
render() {
    return (
      <div className="wrapper">
        <div className="block" backgroundColor={this.state.flag === true ? 'red': 'blue'}>
          <input type="radio" onClick={ this.handleClick } /> 
        </div>
      </div>
    );
  }