Как правильно скрыть статистику WordPress Smiley

Любой, кто использует плагин статистики WordPress.com, заметит, что он вставляет небольшой смайлик в нижний колонтитул. Это изображение необходимо загрузить для отслеживания статистики.

Некоторые люди могут подумать, что этот смайлик “милый”. Остальные сочтут изображение смайлика уродливым (и, возможно, злым) и будут искать способы его удалить. В этом посте будет обзор:

• Прежде всего нет делать, когда смайлик прячется
• Как правильно скрыть это, с некоторыми дополнительными абсолютными позиционными качествами для определенных макетов
• Если вы предпочитаете не скрывать это, как легко центрировать изображение смайлика

Что не делать

Никогда не используйте display: none, чтобы скрыть смайлик WP Stats.

Прежде всего, я хочу остановиться на одном не должен делать при попытке скрыть смайлик от WP Stats, и это использование: display: none. Да, я сказал это дважды, но я следил, чтобы вы не пропустили это.

Да, это тот же код, который вы можете использовать для получения эффекта CSS Killswitch, но это определенно не то, что вы хотите использовать, чтобы не отображать изображение, которое необходимо загрузить для точного отображения статистики.

Что делать вместо

Согласно этому сообщению, разработчик рекомендует использовать следующий код для вашей таблицы стилей (т.е. style.css), если вы хотите скрыть смайлик:

img#wpstats{width:0px;height:0px;overflow:hidden}

Что-то похожее на предыдущий код будет следующим:

img#wpstats{visibility:hidden}

Разница между Visibility: Hidden и Screen: None is Visibility: Hidden будет по-прежнему занимать место в макете, в то время как Screen: None не будет (и помните, вы не можете использовать Screen: None, если вы не хотите отслеживать отслеживание вашей статистики)

В некоторых макетах есть небольшая проблема с этим кодом, занимающим место под нижним колонтитулом, поэтому я подумал о более творческом решении.

Вот пример того, о чем я говорю. Обратите внимание на смайлик в нижнем левом углу, из-за которого макет нижнего колонтитула ломается.

В двух приведенных выше примерах изображение, хотя и не отображается, все равно будет занимать место в макете, в результате чего светло-серая полоса (которая является цветом фона) появится в нижнем колонтитуле.

Абсолютное позиционирование

Комбинация абсолютного позиционирования и приведенного выше кода – хороший способ устранить эту проблему. Вы можете попробовать что-то вроде этого:

img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}

Центрирование изображения

В зависимости от вашего дизайна смайлик может выглядеть лучше, вместо того чтобы скрывать его по центру. Вы можете легко сделать это с помощью следующего фрагмента кода.

img#wpstats{display:block;margin: 0 auto}

Пояснение:

• Устанавливает изображение для отображения в виде блока (вместо встроенного по умолчанию).
• Установите автоматическое левое и правое поля, чтобы эффективно центрировать текущее изображение блокировки.

Вы можете использовать этот CSS для правильного центрирования практически любого тега img без использования дополнительной разметки.

вывод

Кстати, если вы используете плагин WP Stats Smiley Remover, не надо. Потому что все, что вы делаете, добавляет CSS-код display: none в ваш заголовок. Именно то, что ты есть это не должно делать,

Надеюсь, вам понравился совет WordPress / CSS. Как и предыдущий, я знаю, что это было относительно просто. Я могу сделать более сложные, поэтому, если у вас есть какие-либо запросы на такие быстрые советы по CSS, дайте мне знать в комментариях.