Алексей

Что-то в 3 часа ночи у меня голова не варит. Есть над чем поработать. Тест в WP меня не удовлетворил, но цикл работает. Набросал вот так пока что:

function last_posts__func( $atts ) {
    $atts = shortcode_atts( array(
	    'id' => '1', //ID категории по умолчанию 1
	    'list' => '3', //Количество постов по умолчанию 3
	    'tag' => '1', //ID исключающего тега по умолчанию 1
	    	   	   //Можно использовать только id, для slug используйте tag_slug__in
	    'before' => '<div class="last__post">',
	    'after' => '</div>',
	    'before_h' => '<h3>',
	    'after_h' => '</h3>'
    ), $atts );
    $args = array(
	    'category__in' => $id,
	    'tag__not_in' => $tag,
	    'posts_per_page' => $list
    );
    $query = new WP_Query($args); 
	    while( $query->have_posts() ){ $query->the_post();
		    $before;
		    $before_h;
		    the_title();  // заголовок
		    $after_h;
		    the_content();  // текст записи в стандартном выводе
		    $after;
	     }	wp_reset_postdata(); // сбрасываем переменную $query
    }		   

    return $query;
}
add_shortcode('last_post', 'last_posts__func');

Для использования необходимо весь код скопировать и вставить в конец файла functions.php шаблона темы.

Пример Shortcode
[last_post id="1" list="3" tag="58"]

Кодекс query_posts()
Качественный перевод

Пока не претендую на "решение", но если натолкну на нужные мысли, может быть тем самым помогу.

Кодекс: Custom field

Плагин: Advanced Custom Field

Если возникнут вопросы, задавайте - постараюсь помочь.

P.S. Отображение произвольных полей в админке для каждой записи можно сделать через "настройки экрана". Ставите галочку, и внизу при создании записей, будет всегда графа произвольных полей.

Можно задать отступы для изображений всех материалов опубликованных пользователями, а возможность выставлять пользовательские отступы выпилить.

В противном случае будет работать иерархия, где css-класс перекрывает любой стиль прописанный в самом теге:

.class1
#block1
style=" " - всегда главнее

А в большинстве, если не во всех визуальных редакторах все стили пишутся в теги именно с помощью style=" "
И не думаю что !important как-то спасет.

UPD: обычно все картинки в визуальных редакторах включаются внутрь тегов <p></p>в таком случае вряд ли можно легко решить эту задачу. Думаю если суметь избежать попадания изображений внутрь тегов абзацов, то отступы можно сделать за счет отступов самих абзацов.

В писательстве есть прием "Я не знаю о чем писать" - стоит только написать эту строчку, как сразу появляется осмысленное желание написать о чем-то. Потом достаточно стереть первую строчку, и как будто легко вот так вот взял и написал.

Попробуйте придумать для себя строчки кода, схожие по действию. Я не силен в программировании, но суть попробую изобразить:

function nihuyanedelat () { $loh == 0; NCNecros == 0;}
function pishicodbleat ('clean', 'perfect', 'no-crutches', 'more-money') {
    var $lenivaya_jopa = [name]=>"NCNecros";
    if (!loh) {
        $(workay_po_hardu) { document.respect('true'); 
    } else {
        $(sosai) { life.realise('false'); 
    }

day.addEventListener('NCNecros').onPC&morningСoffee = pishicodbleat();

Согласен с @dsadasdad, лучше всего при таком выводе контента обрезать текст по количеству символов, иначе будет каша. Или только остается использовать masonry (habrahabr.ru/sandbox/37498).

Я считаю, если можно написать на CSS не прибегая к js ухищрениям, то почему нет.

Вот есть красивый способ реализации, ничего лишнего: habrahabr.ru/post/136351

Стили позиционирования убрали, но на разрешении 1920x1080 как-то слишком все увеличивается, что не влазит в экран. При в принципе таком скромном количестве отображаемого материала, хорошо бы уместить все в один экран, без прокрутки.

Советую вообще не использовать background-size: cover;
А сделать бэкграунд таким образом, чтобы на широкоформатных экранах он центрировался, а остальное поле заполнял фоновый цвет. Для этого нужно сделать, чтобы фоновое изображение по краям соответствовало фоновому цвету, тогда не будет заметно границ.

То есть просто прописать:

background: url(images/bg2.jpg) 50% 0 no-repeat #цвет; //По центру вверху
/* или */
background: url(images/bg2.jpg) 50% 100px no-repeat #цвет; //По центру с отступом сверху 100px

А для остального задать центрирование и разумное увеличение, через @media