Как начать изучать CSS и разработку тем?
Каковы были бы ваши предложения по изучению CSS и разработке тем WordPress?
Я использую WordPress уже более 4 лет, но я так и не освоился с CSS или дизайном тем (я мог бы настроить его здесь и там, но это на самом деле мало что дает). Я бы с удовольствием смог это сделать, но не знаю, с чего начать. Большинство руководств, с которыми я сталкивался, не являются специфичными для WP, и я боюсь, что пройду через избыточный материал.
Спасибо
6 answers
Прежде всего, различаются вещи. WP - это не CSS, а CSS - это не WP. Но темы WP используют CSS. Так что, если вы узнаете о CSS, вы в основном не ошибаетесь (хорошая вещь в CSS заключается в том, что он является общим для всех веб-сайтов). Другая часть - это HTML. И тогда у вас есть PHP.
Итак, это три компьютерных языка, которые используются друг с другом:
- язык программирования: PHP
- структурный язык: HTML
- специфичный для домена язык: CSS
Тогда у вас есть многоуровневая сетевая архитектура: PHP выполняется на сервере, а HTML и CSS предоставляются сервером, но читаются/обрабатываются браузером на клиентском компьютере.
Таким образом, даже если темы могут показаться простыми, с WP все это становится взаимозаменяемым, и вы должны сами снова разобрать материал.
PHP находится в файлах "Темы" (PHP), HTML генерируется (и также создается) внутри этих файлов тем, CSS находится в файле CSS.
Так что в основном вам нужно самому решить, чему вы хотите научиться. Большинство ресурсов различаются между PHP и HTML/CSS.
Основываясь на вашем вопросе, я могу только предложить вам изучить CSS. Это очень мощно после того, как вы полностью поняли Каскад. Вам нужно знать HTML от руки (не PHP, просто HTML). В конце концов, CSS абсолютно важен для визуального представления веб-сайта, это мощный инструмент для украшения любого веб-сайта. Так что вы можете использовать это со всем, даже с темами WordPress;)
Перейти к оно. Если вы не поняли этого до сих пор, спустя 4 года, потратьте немного времени на образование. Я предлагаю какую-нибудь книгу, такую как http://oreilly.com/catalog/9780596101978 который идеально подходит для самообразования (рядом с практикой).
Сам CSS очень хорошо определен W3C, так же как и HTML. Определение там не очень удобное для пользователя, но оно правильное, поэтому с некоторым желанием вы также можете многому научиться там. w3schools также хорошо сделан (и этот сайт каким-то образом делает это на протяжении многих лет, выглядит по крайней мере, за этим стоит какой-то мозг). HTML/CSS, то есть WWW, возьмите свой источник: D
Для PHP существует php.net . Что касается wordpress, то он постоянно меняется и потребляет ресурсы вашей личной карьеры, поэтому не зацикливайтесь на нем слишком сильно. В любом случае, он хорошо разработан, так что просто ищите, что хорошо для вас, не слишком сосредотачивайтесь на wordpress.
Что касается CSS, то в этой области не так много специфичных для WordPress вещей. Перейдите в w3schools и просмотрите их учебные пособия. Что касается изучения того, как создать тему, два лучших ресурса, которые я могу порекомендовать, - это раздел разработчика темы кодекса и тема по умолчанию (на данный момент двадцать десять). Прочитайте страницу Разработка темы и страницу Шаблоны, чтобы получить хорошее базовое представление. Затем просто прочитайте исходный код тема по умолчанию, использующая документы разработчика (особенно теги шаблонов и Ссылки на функции страницы) в качестве ссылки.
Надеюсь, это помогло!
Шаг 1: Создайте дочернюю тему хорошей прочной родительской темы. A. Установите тематическую тему. B. Следуйте их инструкциям по созданию дочерней темы. (Переместите папку "Тематический образец-дочерняя тема" за пределы тематической папки в разделе wp-контент/темы. Теперь у вас будет /wp-контент/темы/тематический, и /wp-контент/темы/тематический-образец-дочерняя тема. C. Переименуйте последний каталог в ваше новое предпочтительное имя темы. D. Перейдите на экран внешнего вида и активируйте свою новую тему.
Шаг 2. Отредактируйте файл styles.css и поэкспериментируйте с CSS. A. Например, добавьте:
#primary, #secondary {
background-color: #e8e8d6;
margin-right: 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
padding:18px 0 0;
}
#branding {
background: url(http://example.com/wp-content/uploads/2010/09/example.jpg) top left no-repeat;
}
Проще всего начать с изменения цветов и шрифтов, а затем вы сможете заняться более причудливыми вещами, такими как закругленные углы, плавающие дивы и т.д.
Шаг 3: Используйте исходный файл style.css в каталоге /wp-content/темы/тематический в качестве руководства. Действительно изучите этот стиль.css. Используйте ссылку, такую как http://reference.sitepoint.com/css , чтобы помочь понять каждое правило.
С дочерней темой вы можете меняться так мало или так сильно, как вам нравится. Например, некоторые изменят только логотип #бренда, как показано выше. Чем больше вы будете стараться, тем больше узнаете.
Самое важное, что вы можете сделать, это создать локальную установку WordPress, с которой вы можете поиграть. (Инструкции для: Mac | Окна | Linux) Это позволит вам экспериментировать и совершать ошибки без того, чтобы весь остальной мир наблюдал за вами.
Самый быстрый способ обучения - это изменение существующих тем и создание дочерних тем для различных фреймворков. Из них мой личный фаворит - Тематический. Это очень трудно начать с нуля, так что эти ресурсы могут помочь вам приступить к работе.
Чтобы изучить CSS, w3schools.com является ресурсом . Для многих дизайнеров Firebug является незаменимым инструментом. Не выходите из дома без него!
Кайлан упомянул Firebug для firefox.
Это действительно отличный инструмент для просмотра того, как другие создавали свои темы.
Загрузите несколько интересных тем, а затем используйте Firebug для их изучения. Это очень помогло мне, когда я только начинал.
Эти ребята мне очень помогли (и до сих пор помогают) http://digwp.com / Их книга действительно написана вручную и проста для понимания, как и их блог!