Header style в php

PHP Script in CSS Files

1. Using CSS in a PHP File
2. Use the Header() Function to Define CSS Properties in PHP

Using CSS in PHP files allows reusability since we can predefine style inside PHP variables and use them later anywhere in our PHP files. Here is how we can do that:

Using CSS in a PHP File

There are many ways to use PHP scripts in CSS files. We use the following method since it is simple and the most popular.

• The index.php : We are using header() function which is a built in function in PHP. Example: header(‘content-type:text/css; charset:UTF-8;’); in the index.php . Then, we used CSS styling inside this file using both .class and #id .
• The style.php : This file contains our markup HTML that we linked using: . It is an HTML element to link meta attributes in the markup.

 html>  head>  title>How to Use CSS in PHP title>  link rel="stylesheet" type="text/css" href="style.php">  head>  body>  div id="democss">  div>  h1 align="center">Applying style on imageh1>  img src="image.png" alt="demo" class="image">  body>  html> 

We use a simple href attribute of the HTML element to include our style.php file in the header.

php //define header function  header('content-type:text/css; charset:UTF-8;'); //you can style PHP variable for reuse  $txt_color = "black"; $bg_color = "#6B5B95"; $alignment = "center"; $width = "200px"; $height = "200px"; ?> 

#democss width: php echo $width; ?>; height: php echo $height; ?>; background-color: php echo $bg_color; ?>; margin: auto; border: 3px solid black; padding: 10px;  > .image  display: block;  margin-left: auto;  margin-right: auto;  width: 20%;  border-radius: 6px;  > 

When we load the index.php file, it can apply the style from the style.php files using our method.

Use the Header() Function to Define CSS Properties in PHP

The header() function is used to define CSS properties in the PHP file. We have shown some variables that we can use anywhere on our stylesheet.

For example, if you want to change the background color of any HTML elements, you only need to echo $bg_color after the HTML tag.

That is the only way to manipulate CSS in PHP, and it depends on your requirements to apply any CSS in PHP.

You can also use base_url() , PHP require() and other import file functions to do the similar tasks.

Sarwan Soomro is a freelance software engineer and an expert technical writer who loves writing and coding. He has 5 years of web development and 3 years of professional writing experience, and an MSs in computer science. In addition, he has numerous professional qualifications in the cloud, database, desktop, and online technologies. And has developed multi-technology programming guides for beginners and published many tech articles.

Related Article — PHP CSS

Источник

Файл темы header.php тонкости настройки

Один из ключевых файлов темы WordPress, который отвечает за подключение стилей, встроенных функций и скриптов. Благодаря ему происходит передача всех необходимых данных для поочередного запуска модулей и структуры сайта браузеру. Не требует постоянной настройки.

Что такое хедер сайта?

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

• название;
• слоган;
• логотип компании;
• контактные данные;
• навигация

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

Содержимое header WordPress

Добавление метатегов в хедер осуществляется при помощи текстового редактора (рекомендуется Notepad++). В их список входят: head, title, meta, script, link. Как пример, рассмотрим наиболее полный файл без лишних элементов. Дальнейшее внедрение дополнительного функционала зависит от потребностей отдельного заказчика.

Кодовая часть

Необходимо добавить следующие строки в верхнюю часть functions.php:

wp_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ );

wp_enqueue_style( ‘screen-style’ );
>
add_action ( ‘wp_enqueue_scripts’, ‘enqueue_styles’ );
// ENQUEUE SCRIPTS
function enqueue_scripts ()

wp_register_script (‘html5-shim’, ‘http://html5shim.googlecode.com/svn/trunk/html5.js’, array(‘jquery’ ), ‘1’, false );

/** REGISTER HTML5 OtherScript.js **/

wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false );

В header.php следует прописать код:

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

• doctype; (Тип документа)
• языковые атрибуты (ранее использовались условия для браузеров старых версий, однако современный вариант упускает этот момент);
• список метатегов;
• фавикон, RSS, пингбек;
• заголовок;
• при необходимости функции «wp_enqueue_script» и «wp_enqueue_style».

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

Работа с function.php

Указанный ранее код уже помещен в функциональный файл. Некоторые элементы позволяют нам сократить затраты ресурсов сервера на обработку запросов путем создания константы THEME_DIR. Это изложено в первой строке, где сохраняется директория шаблона. Является важным элементом оптимизации темы. Некоторые вебмастера идут сложным путем, вызывая повторные запросы через «get_template_directory_uri()».

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

/*— REMOVE GENERATOR META TAG —*/; remove_action(‘wp_head’, ‘wp_generator’);

Добавление CSS

Теперь необходимо добавить тег link в header.php – для этого создается функция:

wp_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ );

Используются «wp_enqueue_script» и «wp_enqueue_style» согласно рекомендациям руководства по WordPress. Очередность действий:

/** REGISTER css/screen.cs **/; wp_register_style( ‘screen-style’, THEME_DIR . ‘/css_path/screen.css’, array(), ‘1’, ‘all’ ); wp_enqueue_style( ‘screen-style’ );

Для регистрации таблицы стилей используется «wp_register_style», она требует список параметров:

• Выбор доступного имени.
• Указание пути к файлу (в данной ситуации используется константа THEME_DIR).
• Вписываются условия, необходимые файлы для предварительной загрузки, название стилей.
• используемая версия.
• Медиа-атрибут тега link.

Далее, вызывается «wp_enqueue_style» и передается имя стиля, который будет применен. Для добавления нескольких образцов в header WordPress можно повторно копировать строки, а также изменять имеющиеся параметры.

Добавление скриптов

Применяя данный код происходит добавление скриптов:

wp_register_script (‘html5-shim’, ‘http://html5shim.googlecode.com/svn/trunk/html5.js’, array(‘jquery’ ), ‘1’, false );

wp_enqueue_script( ‘html5-shim’ );
div>
/** REGISTER HTML5 OtherScript.js **/

wp_register_script( ‘custom-script’, THEME_DIR . ‘/js_path/customscript.js’, array( ‘jquery’ ), ‘1’, false );

Процесс аналогичен подключению стилей, но используются другие функции («wp_register_script» и «wp_enqueue_script»). Для первой необходимы схожие параметры, как для «wp_register_style» – отличается лишь 5 пункт, в котором определяется, будет ли добавлен вызов через «wp_head» (значение fals) или «wp_footer» (значение true).

Через «wp_enqueue_script» указывается имя скрипта для интеграции. Для большего количества образцов необходимо повторно скопировать код, изменить параметры, имя и директорию.

Header WordPress

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

Устанавливаются языковые атрибуты или добавляются классы в соответствии с версией браузера (больше не применяется).

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

Строка отключающая использование браузером Quirks Mode – данный режим плохо сказывается на разметке:

Указание кодировки для правильного отображения шрифтов:

Параметры, улучшающие SEO-показатели ресурса (описание, ключевые слова):

Добавление favicon для сайта:

Высокая важность. Изменяет стандартный заголовок, улучшая SEO-параметры:

Список стандартных и наиболее применяемых функций:

• wp_head WordPress – используется для добавления кода из плагинов, скриптов, библиотек;
• get_header WordPress – выполняет подключение файла шаблона (для каждой страницы отдельное имя).

Заключение

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

Источник