Я сейчас тщетно пытался сделать это на чистом CSS, не получилось. По мне, нужно сделать разные CSS-классы с transition'ами, а потом добавлять и удалять классы на JS
Поставьте себе WordPress на локальный сервер, сделайте одно из нужных действий, если все нормально, потом залейте на сервер. И так далее.
То есть делаете маленькие изменения на локальном сервере, отлаживаете и выкладываете онлайн.
// index.php
$f = file_get_contents("index.html");
$f = str_replace("\n", "", $f);
$f = str_replace("\r", "", $f);
// eval("?>$f<?php"); // Если в файле может лежать php-код
echo $f; // Если в файле только html-код
1. Картинка не нажимается
2. Весь блок лучше сделать кликабельным
3. Указатель места здесь не очень подходит
4. Тег <i> нужен для форматирования текста, а не для иконок
5. Лучше сделать для <article> margin со всех сторон, а не только справа и снизу
HTML5 позволяет создавать несуществующие теги. Вы можете создать тег red или bold - правила для него задаются в CSS как обычно. l - это придуманный автором кода тег
Разницы между занимаемыми ресурсами быть не должно. Количество записей все равно будет одинаковое. Что насчет производительности, лучше первый вариант. Легче имкать по базам данных, чем в одной огромной таблице