Роль PHP в динамической замене заголовков. Стиль заголовков контролируется CSS’ом

Это может не совсем ответить на вопрос, но это удовлетворило мои потребности, а может быть и другие.

Поэтому, если вы просто хотите показать разные тексты или изображения, сохраните тег пустым и напишите свой контент в нескольких атрибутах данных, таких как . Покажите их с одним из псевдо классов:before {content: attr(data-text1)}

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

2018-12-04T00:00Z

Попробуйте использовать: до и: после. Один вставляет текст после визуализации HTML, другие вставки перед визуализацией HTML. Если вы хотите заменить текст, оставьте содержимое кнопки пустым.

В этом примере задается текст кнопки в соответствии с размером экрана.

xxx

Текст кнопки:

большой экранxxx

большой экран

2) с: после

Экран xxxbig

большой экран

2018-12-11T00:00Z

Простой, короткий, эффективный. Никакого дополнительного html не требуется.

Pvw-title { color: transparent; } .pvw-title:after { content: "New Text To Replace Old"; color: black; /* set color to original text color */ margin-left: -30px; /* margin-left equals length of text we"re replacing */ }

Я должен был сделать это для замены текста ссылки, кроме дома, для парикмахерских woocommerce

Body.woocommerce .woocommerce-breadcrumb > a { color: transparent; &:after { content: "Store"; color: grey; margin-left: -30px; } }

Body.woocommerce .woocommerce-breadcrumb > a { color: transparent; } body.woocommerce .woocommerce-breadcrumb > a&:after { content: "Store"; color: @child-color-grey; margin-left: -30px; }

2018-12-18T00:00Z

Если вы хотите использовать псевдоэлементы и позволить им вставлять содержимое, вы можете сделать следующее. Он не предполагает знания исходного элемента и не требует дополнительной разметки.

Element { text-indent: -9999px; line-height: 0; /* Collapse the original line */ } .element::after { content: "New text"; text-indent: 0; display: block; line-height: initial; /* New content takes up original line height */ }

2018-12-25T00:00Z

Или, может быть, вы можете обернуть «Факты» вокруг следующим образом:

Затем используйте:

Pvw-title span { display: none; } .pvw-title:after { content: "whatever it is you want to add"; }

2019-01-01T00:00Z

У меня была проблема, когда мне пришлось заменить текст ссылки, но не мог использовать javascript, и я не мог напрямую изменить текст гиперссылки, поскольку она была скомпилирована из XML. Кроме того, я не мог использовать псевдоэлементы, или они, похоже, не работали, когда я их пробовал.

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

Div.field a { color:transparent; position:absolute; top:1%; } div.field span { display:inline-block; }

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

Изменить: может ли кто-нибудь сказать мне, почему это было приостановлено? Мое решение работает...

Задача

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

Решение

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

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

Метод Лэнгбриджа-Лихи

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

Рис. 1. Изображение для замены текста заголовка

В стилях для селектора H1 указываем следующий код (пример 1).

Пример 1. Стиль для отображения фоновой картинки

H1 { padding-top: 54px; /* Высота изображения */ height: 0; /* Нулевая высота заголовка */ overflow: hidden; /* Скрывает область */ background: url(head1.png) no-repeat; /* Фоновый рисунок для замены текста */ }

Задача данного стиля - спрятать текст и вывести изображение. Само скрытие происходит достаточно хитро. Вначале текст смещается вниз за счет использования свойства padding-top со значением, равным высоте нашей картинки. Далее явно устанавливаем нулевую высоту заголовка. Высота элемента при этом будет равна 54 пиксела, поскольку складывается из значений height и padding-top . Несмотря на явно заданную нулевую высоту блока заголовка, текст всё равно отображается, поэтому прячем его через свойство overflow со значением hidden . В этом случае становится видна только область внутри элемента заданных размеров. Так как текст смещён вниз за пределы этих 54 пикселов высоты, то его не видно.

Сама картинка выводится в виде фона с помощью свойства background , где обязательно надо указать значение no-repeat , чтобы фон не повторялся. Окончательный код с использованием заголовков первого и второго уровня приведён в примере 2.

Пример 2. Замена текста изображением

HTML5 CSS 2.1 IE Cr Op Sa Fx

История Белоснежки

Столкнувшись со сложной задачей создания полнометражного мультфильма, Дисней понимал, что имеющиеся технические средства ему не подходят. Тогда он сам придумал и воплотил в жизнь многоплановую камеру, идею которой в той или иной мере используют спустя десятилетия после ее изобретения.

Интересные факты

Уолт Дисней специально не смотрел на актрис, которые пробовались на озвучивание роли Белоснежки. Так он мог объективно оценить голос. Однажды он услышал песню в великолепном исполнении.
- Ну, как? - спросили Уолта коллеги.
- Голос хорош, но... староват, - ответил Дисней.

Эта была 14-летняя Дина Дурбин, впоследствии прославившаяся на весь мир.

Результат данного примера показан на рис. 2.

Рис. 2. Страница с замещенными заголовками

Среди достоинств данного метода - простота и удобство реализации. Внутрь тегов

и

не надо добавлять дополнительных элементов, всё делается через стили. Однако метод не работает при отключении картинок в браузере, в этом случае мы увидим пустые прямоугольники.

Метод Левина

Александр Левин придумал интересный подход, при котором текст закрывается пустым блоком, а поверх выводится фоновое изображение. Код для текста заголовка будет следующим (пример 3).

Пример 3. Заголовок с тегом

Заголовок

Стиль для замены текста приведен в примере 4.

Пример 4. Стиль для отображения фоновой картинки

H1 { position: relative; /* Относительное позиционирование */ } h1 span { position: absolute; /* Абсолютное позиционирование */ left: 0; /* Положение относительно левого края */ width: 100%; /* Ширина закрываемого блока */ height: 54px; /* Высота рисунка */ background: url(head1.png) no-repeat; /* Фоновый рисунок для замены текста */ }

Для заголовка вначале задаётся относительное позиционирование с помощью значения relative свойства position , а для тега внутри заголовка - абсолютное позиционирование (position: absolute ). Это сделано для того, чтобы задать точное положение внутреннего элемента относительно левого края родителя. С этой целью добавляется свойство left с нулевым значением. Также необходимо задать ширину и высоту закрываемого блока и фоновый рисунок, который будет отображаться поверх текста. Окончательный код приведен в примере 5.

Пример 5. Замена текста изображением

HTML5 CSS 2.1 IE Cr Op Sa Fx

История Белоснежки

Чтобы опробовать новую многоплановую камеру в действии, Дисней поставил экспериментальную короткометражку под названием «Старая мельница». Несмотря на некоторую простоту сюжета, работа получила премию «Оскар» как лучший короткометражный мультфильм 1937 года.

Интересные факты

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

Результат данного примера показан на рис. 3. Та же страница с отключенными изображениями представлена на рис. 4.

Рис. 3. Изображения поверх текста

Рис. 4. Страница с отключенными рисунками

Хотя стиль в примере получился достаточно громоздким, поставленная цель выполнена. Текст в заголовках сохраняется, он виден при отключенных картинках, а сами рисунки эффективно накладываются поверх надписи. Следует также отметить возможные неприятности:

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

Несмотря на указанные недостатки приведенных методов, они работают и выполняют свои задачи - выводят вместо заголовков изображения, сохраняя при этом текст для поисковых систем и речевых браузеров.

Метод Рандла

Метод основан на сокрытии текста путём его смещения за край экрана с помощью свойства text-indent с отрицательным значением. Значение должно быть достаточно велико, чтобы при любом разрешении монитора текст не отображался на странице. Вывод картинки происходит, как и в других приведенных методах за счет применения свойства background , как показано в примере 6.

Пример 6. Использование text-indent

HTML5 CSS 2.1 IE Cr Op Sa Fx

История Белоснежки

Многие критики прочили «Белоснежке» оглушительный провал, мотивируя это тем, что зритель не пойдёт смотреть на рисованных артистов. Однако сам Дисней верил в успех, его вера и творческий подход не подвели, эту картину любят и смотрят спустя десятилетия после ее выхода.

Обзор комментариев

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

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

Banner {
display: block;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 0px; /* обнуляем значение ширины */
height: 236px; /* высота нового изображения */
padding-left: 180px; /* размер отступа равен ширине нового изображения */
}

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

Некоторые предлагают для достижения той же цели использовать псевдоэлементы :before и :after , не объясняя при этом как именно это делается. Автор статьи категорически заявил, что этот способ не работает. Я тоже сделал пару экспериментов с псевдоэлементами и не добился желаемого результата.

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

Banner {
content: url(http://notrealdomain2.com/newbanner.png);
}

Что касается вытеснения и замены исключительно текста, то здесь тоже имеется несколько вариантов. Вот первый:

Hide-text {
text-indent: 1000%;
white-space: nowrap;
overflow: hidden;
}

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

А вот код, позволяющий заменить текст изображением:

Text-replacement {
display: block;
height: 250px;
width: 250px;
text-indent: -100%;
overflow: hidden;
background: #333 url(‘url-string’) no-repeat;
}

Оба примера используют свойство text-indent , что в случае с текстом является самым оптимальным решением, не требующим манипуляций с шириной, внутренними отступами и свойством box-sizing .

Давайте все-таки вернемся к предложенному автором статьи способу и его альтернативе (с установкой нулевой ширины). Помимо того, что они прекрасно справляются с поставленной задачей, у них есть существенные недостатки:

• Если таким образом вы замещаете фрагмент текста, то он все еще остается контентом страницы, хотя и не видимым пользователю. Этот текст по-прежнему может быть выделен. То есть в данном случае вы должны быть абсолютно уверены, что текст, который вы прячете от пользователя, действительно должен быть просто скрыт, а не удален полностью. Ведь ситуации бывают разные, возможно, хотя и маловероятно, что в одном из браузеров стили будут отключены вообще.
• Это негативно сказывается на производительности ресурса, поскольку, после такой замены мы все же вынуждаем браузер загружать оба изображения.
• Да, еще одна интересная деталь. При вызове пользователем контекстного меню изображения, доступные действия и отображаемые при этом свойства, будут относиться не к видимому фоновому изображению, а к скрытому встроенному изображению, что может ввести в заблуждение, поскольку элемент все еще ссылается на файл исходного изображения.

Один из читателей в обход проблемы одновременной загрузки двух изображений, предложил изначально использовать однопиксельное прозрачное GIF изображение, с помощью которого, как вам известно, можно заполнить фон любого размера, а затем подгружать необходимую картинку и вставлять ее одним из представленных выше способов. Эта идея тоже не получила должной поддержки, поскольку хотя однопиксельное изображение само по себе очень мало́, оно все-таки требует выполнения дополнительного HTTP запроса для своей загрузки, что также негативно отражается на производительности. С точки зрения SEO это тоже не эффективно, поскольку однопиксельное изображение, ассоциируемое с контентом, который оно должно дополнять, вряд ли будет положительно воспринято поисковыми машинами, даже если оно сопровождается описательными атрибутами alt и title .

В продолжение темы SEO, хочется отметить, что между автором статьи и одним из ее читателей возник нешуточный спор касательно высказывания о том, что применение display: none негативно воспринимается поисковиками. Ведь не секрет, что множество элементов пользовательского веб-интерфейса использует это значение свойства display . К ним можно отнести различные виджеты, закладки, слайд шоу и т.д. В принципе, такой метод скрытия элементов не связан с какими-либо негативными последствиями. Вот приведенная автором цитата Google, позаимствованная с форума StackExchange :

Просто использование свойства display: none само по себе еще не означает автоматическое применение санкций. Ключевым моментом в этом случае является цель его применения. В том случае, если оно необходимо для реализации определенного механизма, как автоматического, так и запускаемого пользователем, который делает контент видимым, то это допустимо.

Но применительно к обсуждаемой здесь теме - замены изображения либо текста, скрытие контента таким образом не является частью какого-либо механизма, поэтому скорее всего поисковики не будут приветствовать такое оформление. Как бы там ни было, я считаю, что скрытие определенных фрагментов страницы с помощью display: none в большей степени является практическим вопросом, нежели теоретическим и любой разработчик может использовать его при необходимости. Отношение к этому приему поисковых систем в данном случае имеет второстепенное значение.

* Примечание переводчика.

Привет! Хотите изменить на своём сайте CSS стили? Думаете что это сложно? Уделите немного внимания данной записи и вы узнаете как можно очень просто менять CSS стили на любом сайте WordPress! Вам не нужно быть продвинутым вебмастером, изучать css стили и прочие тонкости, всё гораздо проще. Всё очень просто и быстро! Смотрите далее!

Как изменить CSS стили на сайте WordPress

Зайдите на свой сайт, нажмите правой кнопкой мыши по любому элементу сайта который вы хотите изменить. В открывшемся окне нажмите на вкладку – Просмотреть код. В примере мы изменим цвет названия страниц в меню сайта. Таким образом можно будет изменять абсолютно любые стили сайта.

Далее, в правой части экрана у вас откроется окно с исходным кодом элемента сайта, для которого вы открыли код. Здесь нас интересуют стили, они будут отображаться в окне на вкладке – Styles . По названию стилей и по цвету, можно сразу определить какая часть CSS стиля нам нужно для её изменения. На скриншоте показано отрывок CSS стиля с названием – main-menu и белым цветом (как меню на сайте), то что нам надо.

Есть два варианта изменения CSS стилей.

1 вариант с помощью плагина

Первый вариант очень хорошо подойдёт для всех сайтов на CMS WordPress. После того как мы нашли нужные нам CSS стили, вам необходимо установить на свой сайт плагин – Simple Custom CSS . Установить данный плагин можно прямо из админ-панели wordpress. Перейдите на страницу: Плагины – Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.

Далее, переходим на страницу плагина Simple Custom CSS. Перейдите на страницу: Внешний вид – . Вставляем в поле скопированную часть css кода, меняем стили (на скриншоте ниже уже изменён цвет) и жмём на кнопку – Update Custom CSS .

Точно также меняются и все остальные стили, размер, цвет, шрифт, бордюр, набивка, рамка и т.д. Открываете любой справочник с обозначениями CSS стилей и меняете стили так как вам надо.

Внимание! CSS стили лучше переносить непосредственно на WordPress. Внешний вид – Настроить – Дополнительные стили . То есть, плагин Simple Custom CSS, можно не использовать!

2 вариант меняем стили в css файлах сайта

Знать бы где находятся нужные нам CSS стили, а поменять их не так-то и сложно, поменял значения и всё готово. Как раз с помощью просмотра кода элемента в окне браузера вы можете очень просто узнать где находятся нужные вам CSS стили. Снова зайдите на свой сайт, нажмите правой кнопкой мыши по любому элементу вашего сайта, в открывшемся окне нажмите на вкладку – Просмотреть код.

В окне просмотра кода, возле каждого css стиля, с правой стороны будет отображаться ссылка, наведите на неё курсор мыши, у вас появится подсказка с расположением данного стиля. То есть, вам покажут в какой именно папке и файле находится данный css стиль, который вам нужно изменить.

Теперь вам лишь останется зайти в свою корневую директорию вашего сайта на хостинге, найти данный файл, следуя пути указанному в подсказке и изменить CSS стили. Как видите если разобраться, то всё очень просто!

Остались вопросы? Напиши комментарий! Удачи!

CSS стили изменить на сайте просто и быстро обновлено: Июль 22, 2018 автором: Илья Журавлёв

(статья на A List Apart), но без использования JavaScript.

Вооружившись только PHP и CSS, метод P+C DTR позволяет динамически создавать картинки и заменять ими заголовки страниц. Надоело пользоваться 3-мя заезженными шрифтами? Надоело создавать и редактировать картинки в Photoshop? Если так, то P+C DTR может быть как раз для тебя.

Роль PHP в динамической замене заголовков

Там, где оригинальный метод динамической замены использует JavaScript для замены текста, P+C DTR использует PHP-функцию выходной буферизации (output buffering). Цель этой функции — найти на интернет-странице тэги заголовков, выделить текст и присвоить найденным заголовкам линейный стиль и картинку, которую генерирует скрип.

Разницей между выходной буферизацией и обычной PHP-функцией является то, что метод P+C DTR может быть добавлен к существующей странице без нужды напрямую кодировать линейные стили или вызовы функции.

Стиль заголовков контролируется CSS’ом

Почти сразу после экспериментов с первым методом, проявились его недостатки — цвет и фон заголовков всегда должны совпадать, а стиль заголовков может изменяться только в самом скрипте.

P+C DTR расширяет возможности традиционного метода замены текста, позволяя контролировать с помощью CSS такие параметры как цвет шрифта, цвет фона и даже размер шрифта.

При первой загрузке страницы, CSS-файл, предназначенный для заголовков, автоматически добавляется к сессии браузера. Это означает, что обращение к CSS-файлу происходит только один раз за сессию.

Ограничения

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

• Заголовкам нельзя присваивать id , class и другие атрибуты.
• Текст заголовка не должен быть очень длинным, так как он не будет переноситься на другую строку (отсутствие word-wrapping).
• Нельзя изменять стиль заголовка в зависимости от страницы.

Инструкции по скачиванию и установке

• Скачай zip-файл P+C DTR и распакуй архив.
• Открой файл image.php , чтобы создать свойства шрифта и прописать путь к файлу шрифта.
• Загрузи файлы на сервер для тестирования.
• Если отсутствует текст заголовка в виде картинки, то скорей всего сервер не поддерживает PHP-генерацию картинок.
• При возникновении ошибки: The server could not create this heading image, попрубуй воспользоваться советом от excitris.com (англ.)

Чтобы сбросить все значения сессии, добавьте?debug=true в конец ссылки создаваемой страницы.

Всего оставлено 9 комментариев

От лукавого это. Если применять, то только для своих личных нужд типа сайта-визитки или чего-то подобного. В коммерческой работе я бы не стал использовать.

Кстати, недавно пришлось убирать sIFR-заголовки со страниц сайта одной американской хостинг-компании. Клиент был недоволен багами под Линуксом, а так же той картинкой, которую наблюдали пользователи Firefox с активным экстеншеном AdBlock.

И если даже sIFR ещё очень сырая технология, то что уж говорить об этом чуде технологической мысли.

Максим, 2 самых больших недостатка этого метода – ограниченная длина заголовков и настройка браузеров, скрывающая картинки.

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

Что касается скрытия картинок. P+C DTR ещё в стадии разработки. И возможно создатели этого метода додумаются вставлять картинку между тэгами заголовка и параллельно оставлять текст, применяя к нему негативный отступ. Хотя если картинка отсутствует, как об этом узнает скрипт, чтобы убрать из CSS негативный отступ для правильно отображения текста. Это, на мой взгляд, самая большая проблема доступности этого метода. Возможно, найдётся решение.

Конечно, sIFR ещё очень сырая технология и если мне не изменяет память, то её создатели вели переговоры с разработчиками AdBlock, чтобы устранить между собой неправильное взаимодействие.

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

Если и придумают, то ещё много времени пройдёт до того момента, как задумка заработает.

Кстати, sIFR-заголовки очень непредсказуемо ведут себя, когда ненароком задеваещь padding-и или, иначе говоря, каким-то образом играешь с размерами заменяемого элемента.

Материал очень интересный, но обратите внимание на огромный недостаток такой технологии – это ухудшит позиции в поисковых машинах, причем существенно, для всех страниц с такими заголовками. Тэг H1 один из важных факторов для поисковой оптимизации, игнорировать его очень неразумно, т.к. трафик = деньги.

Никогда не использовал H1, для чего такой громадный текст ‘лепить”, поисковики с радостью “едят” теги STRONG и B, выделяете слова по которым хотите поднять страницу в поиске, и будет вам приток посетителей, а H1 много текста не выделишь, разве что только заголовок страницы.

Проблемы с размерами шрифта и видимостью решаются при момощи CSS. Тем более если на картинку повесить альт она будеть иметь такой же вес как текст в H1. Проверено!