Как начать изучать CSS и разработку тем?

wordpress.stackexchange https://wordpress.stackexchange.com/questions/288

  •  16-10-2019
  •  | 
  •  

Вопрос

Каковы были бы ваши предложения по изучению CSS и разработке тем WordPress?

Я использую WordPress уже более 4 лет, но мне так и не удалось по-настоящему освоиться с CSS или дизайном темы (я мог бы подправить его кое-где, но на самом деле это мало что дает).Я бы с удовольствием смог это сделать, но не знаю, с чего начать.Большинство руководств, с которыми я сталкивался, не специфичны для WP, и я боюсь, что буду просматривать избыточный материал.

Спасибо

Это было полезно?

Решение

Прежде всего отличается между вещами. 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 Forkhand (не 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.Следуйте их инструкциям по созданию дочерней темы.(Переместите папку thematic-sample-child-theme за пределы тематической папки в раздел wp-content/темы.Теперь у вас будет /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/themes/thematic в качестве руководства.Действительно изучите этот style.css.Используйте ссылку, такую как http://reference.sitepoint.com/css чтобы помочь понять каждое правило.

С дочерней темой вы можете изменять ее так мало или так сильно, как вам нравится.Например, некоторые изменят только логотип #brand, как показано выше.Чем больше вы будете стараться, тем большему научитесь.

Самое важное, что вы можете сделать, - это создать локальную установку WordPress, с которой вы можете поиграть. (Инструкции для: Маки | Окна | Linux) Это позволит вам экспериментировать и совершать ошибки без просмотра остального мира.

Самый быстрый способ учиться - это изменить существующие темы и создать детские темы для различных фреймворки. Анкет Из них, мой личный фаворит Тематический. Анкет Начнется очень сложно с нуля, поэтому эти ресурсы могут помочь вам начать работу.

Чтобы изучить CSS, w3schools.com является а ресурс. Для многих дизайнеров, Firebug является незаменимым инструментом. Не уходи из дома без этого!

Кайлан упомянул Firebug для Firefox.

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

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

Эти ребята мне очень помогли (и все еще делают) http://digwp.com/Их книга действительно хэндсон и легко понять, как и их блог!

Лицензировано под: CC-BY-SA с атрибуция
Не связан с wordpress.stackexchange
scroll top