Как я могу добавить следующий код CSS в заголовок моей страницы из functions.php? - PullRequest
0 голосов
/ 10 февраля 2011

Прямо сейчас я помещаю следующий код в header.php.

Я думаю, что это решение не очень элегантно.

Как добавить этот код CSS из functions.php в мой заголовок (как бы этот код выглядел)?

    wp_head();
?>
<style>
    .jimgMenu ul li.landscapes a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'intro_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.people a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.nature a {
        background: url(<?php bloginfo('template_directory'); ?>/images/nature.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.abstract a {
        background: url(<?php bloginfo('template_directory'); ?>/images/abstract.jpg) repeat scroll 0%;
    }

    .jimgMenu ul li.urban a {
        background: url(<?php bloginfo('template_directory'); ?>/images/urban.jpg) repeat scroll 0%;

    }
    .jimgMenu ul li.people2 a {
        background: url(<?php bloginfo('template_directory'); ?>/images/people.jpg) repeat scroll 0%;
        min-width:310px;
    }
</style>

Ответы [ 5 ]

5 голосов
/ 11 февраля 2011

Лучше всего использовать хуки - тогда вам нужно всего лишь изменить файл functions.php, а не шаблон, чтобы упростить обновление шаблона, если автор выпустит изменения, обновления или исправления.

functions.php

<?php

function add_styles()
{
    ?>
    <style type="text/css">
    .jimgMenu ul li.landscapes a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'intro_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.people a {
        background: url(<?php bloginfo('template_directory'); ?>/images/<?php echo get_option(THEME_PREFIX . 'slider_image'); ?>) repeat scroll 0%;
    }

    .jimgMenu ul li.nature a {
        background: url(<?php bloginfo('template_directory'); ?>/images/nature.jpg) repeat scroll 0%;
    }
    .jimgMenu ul li.abstract a {
        background: url(<?php bloginfo('template_directory'); ?>/images/abstract.jpg) repeat scroll 0%;
    }

    .jimgMenu ul li.urban a {
        background: url(<?php bloginfo('template_directory'); ?>/images/urban.jpg) repeat scroll 0%;

    }
    .jimgMenu ul li.people2 a {
        background: url(<?php bloginfo('template_directory'); ?>/images/people.jpg) repeat scroll 0%;
        min-width:310px;
    }
</style>

    <?php
}
add_action('wp_head', 'add_styles');

при условии, что ваша тема построена правильно и имеет wp_head(); в <head>, что в вашем примере делает, вам не нужно изменять никакие файлы, кроме functions.php


Я добавлю, что для оптимизации загрузки сайта и повышения производительности из-за кэширования внешних таблиц стилей на стороне клиента вы должны создать отдельную таблицу стилей, а вместо функции, о которой я упоминал выше, распечатывать CSS, это вывело бы <link> к таблице стилей.

Хотя вы можете выполнить не используя <?php bloginfo('template_directory'); ?> и вместо этого использовать относительные URL-адреса (т.е. ../ images / .....), это все равно будет представлять проблему с get_option(THEME_PREFIX . 'intro_image'), так что если изменения в вашей таблице стилей действительно это небольшое то, что я перечислил выше с помощью ловушки, является решением окей , если стили, которые вы хотите внедрить в <head>, длиннее / больше, чем вы перечислили в вопросе, я бы предложил использовать предложение @ erenon динамическая таблица стилей и то, что я только что упомянул об изменении моей функции и крючка для включения таблицы стилей вместо печати стилей.

2 голосов
/ 10 февраля 2011

Вы можете легко обернуть CSS в функцию

function headerCSS(){
    ?>
      // YOUR CSS
    <?php
}

А затем вызвать функцию

<HEAD>
<?php headerCSS(); ?>
//other header stuff here
<?HEAD>
<BODY>
0 голосов
/ 10 февраля 2011

@ janoChen: Предполагая, что ваша структура каталогов должна выглядеть следующим образом:

/wp-content/
  /themes/
    /your_theme/
      /images/

поместите все эти стили без <?php bloginfo('template_directory'); ?> в styles.css файл в /wp-content/themes/your_theme/, а затем в header.php просто

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/styles.css" media="screen" type="text/css" />
0 голосов
/ 10 февраля 2011

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

Обратите внимание на использование тега для установки пути ресурса сайта.

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

См .: http://webdesign.about.com/od/htmltags/qt/how-to-use-html-base-tag.htm

0 голосов
/ 10 февраля 2011

Вы не можете позвонить , но вы можете вставить его как css:

<link href="generate-css.php" type="text/css" rel="stylesheet" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...