it-swarm.xyz

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

Что бы вы посоветовали для изучения разработки CSS и WordPress тем?

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

Спасибо

1
Tal Galili

Прежде всего, различаются вещи. WP не является CSS, а CSS не является WP. Но в темах WP используется CSS. Так что, если вы узнаете о CSS, вы в основном не ошибаетесь (что хорошо в CSS, это является общим для всех сайтов). Другая часть - это HTML. И тогда у вас есть PHP.

Итак, это три компьютерных языка, которые используются друг с другом:

  • язык программирования: PHP
  • структурный язык: HTML
  • специфичный для домена язык: CSS

Тогда у вас есть многоуровневая сетевая архитектура: PHP выполняется на сервере, а HTML и CSS предоставляются сервером, но считываются/обрабатываются браузером на клиентском компьютере.

Таким образом, даже если темы могут выглядеть простыми, с WP все это становится взаимозаменяемо смешанным, и вы сами должны снова разобрать материал.

PHP находится в файлах "Theme" (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 слишком много.

5
hakre

Что касается CSS, в этой области не так много специфичных для WordPress вещей. Перейдите в w3schools и ознакомьтесь с их учебными пособиями. Что касается изучения того, как создать тему, то два лучших ресурса, которые я могу порекомендовать, - это раздел разработчика кодекса и тема по умолчанию (на данный момент, Двадцать десять). Прочитайте страницу разработки темы и страницу , чтобы получить хороший базовое понимание. Затем просто прочитайте исходный код темы по умолчанию, используя документы разработчика (особенно теги шаблона и Справочник по функциям страницы) как справочник.

Я надеюсь, что это помогло!

3
John P Bloch

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

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

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

2
kylan

Шаг 1: Создайте дочернюю тему с хорошей родительской темой. А. Установите тематическую тему. Б. Следуйте их инструкциям по созданию детской темы. (Переместите папку thematic-sample-child-theme вне тематической папки в папку wp-content/themes. Теперь у вас будут/wp-content/themes/thematic и/wp-content/themes/thematic-sample- child-theme. C. Переименуйте последний каталог в название новой предпочитаемой темы. D. Откройте экран внешнего вида и активируйте новую тему.

Шаг 2: отредактируйте styles.css и поэкспериментируйте с CSS. А. Например, добавьте:

#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 в качестве руководства. Действительно изучите этот стиль. Используйте ссылку, например http://reference.sitepoint.com/css , чтобы помочь понять каждое правило.

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

2
Marjorie Roswell

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

0
user3401

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

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

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

0
Nohl