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

<p>что бы вы посоветовали для изучения разработки css и wordpress тем?</p><p>я использую wordpress уже более 4 лет, но я никогда не чувствовал себя комфортно с css или дизайном тем (я мог бы настроить его тут и там, но это не особо помогает). я хотел бы быть в состоянии сделать это, но не знаю, с чего начать. большинство руководств, с которыми я сталкивался, не являются wp конкретными, и я боюсь, что перейду лишний материал.</p><p>спасибо</p>

<p>прежде всего, различаются вещи. wp не является css, а css не является wp. но в темах wp используется css. так что, если вы узнаете о css, вы в основном не ошибаетесь (что хорошо в css, это является общим для <em> всех </em> сайтов). другая часть - это html. и тогда у вас есть php.</p><p>итак, это три компьютерных языка, которые используются друг с другом:</p><ul> <li>язык программирования: php</li> <li>структурный язык: html</li> <li>специфичный для домена язык: css</li> </ul><p>тогда у вас есть многоуровневая сетевая архитектура: php выполняется на сервере, а html и css предоставляются сервером, но считываются/обрабатываются браузером на клиентском компьютере.</p><p>таким образом, даже если темы могут выглядеть простыми, с wp все это становится взаимозаменяемо смешанным, и вы сами должны снова разобрать материал.</p><p>php находится в файлах "theme" (php), html генерируется (и также есть) внутри этих файлов тем, css находится в файле css.</p><p>поэтому в основном вам нужно решить, что вы хотите изучать. большинство ресурсов различаются между php и html/css.</p><p>исходя из вашего вопроса, я могу только предложить вам изучить css. это очень мощный после того, как вы полностью поняли каскад. вы должны знать html заранее (не php, а только html). в конце концов, css абсолютно важен для визуального представления сайта, это мощный инструмент для украшения любого сайта. так что вы можете использовать это со всем, даже с wordpress тем;)</p><p>действуй. если вы не поняли до сих пор после 4 лет, потратьте немного образования. я предлагаю какую-нибудь книгу, например <a href="http://oreilly.com/catalog/9780596101978">http://oreilly.com/catalog/9780596101978</a> , которая идеально подходит для самообразования (рядом с практикой).</p><p>сам css очень хорошо определен как w3c, так и html. определение там не очень удобное для пользователя, но оно правильное, поэтому с некоторой волей вы также сможете многому научиться там. w3schools тоже хорошо сделан (и этот сайт каким-то образом делает это на протяжении многих лет, похоже, что за этим стоит какой-то мозг). html/css, это www, возьмите ваш источник: d</p><p>для php есть php.net. что касается wordpress, то он всегда меняется и потребляет ресурсы вашей личной карьеры, поэтому не стоит слишком зацикливаться на этом. в любом случае его хорошо поддерживают, так что, просто посмотрите, что хорошо для вас, не сосредотачивайтесь на wordpress слишком много.</p>

<p>что касается css, в этой области не так много специфичных для wordpress вещей. перейдите в <a href="http://w3schools.com">w3schools</a> и ознакомьтесь с их учебными пособиями. что касается изучения того, как создать тему, то два лучших ресурса, которые я могу порекомендовать, - это раздел разработчика <a href="http://codex.wordpress.org/developer\_documentation#theme\_development">кодекса</a> и тема по умолчанию (на данный момент, двадцать десять). прочитайте <a href="http://codex.wordpress.org/theme\_development">страницу разработки темы</a> и страницу <a href="http://codex.wordpress.org/templates"></a> , чтобы получить хороший базовое понимание. затем просто прочитайте исходный код темы по умолчанию, используя документы разработчика (особенно <a href="http://codex.wordpress.org/template\_tags">теги шаблона</a> и <a href="http://codex.wordpress.org/function\_reference">справочник по функциям</a> страницы) как справочник.</p><p>я надеюсь, что это помогло!</p>

<p>самое важное, что вы можете сделать, - это создать локальную установку wordpress, с которой вы можете поиграть. (инструкции для: <a href="http://codex.wordpress.org/installing\_wordpress\_locally\_on\_your\_mac\_with\_mamp">mac</a> | <a href="http://www.microsoft.com/web/gallery/wordpress.aspx">windows</a> | <a href="http://www.techtickle.com/install-wordpress-locally-on-ubuntu-linux-with-lamp.html">linux</a> ) это позволит вам экспериментировать и совершать ошибки без наблюдения остального мира.</p><p>самый быстрый способ обучения - это изменение существующих тем и создание дочерних тем для различных <a href="http://codex.wordpress.org/theme\_frameworks">структур</a> . из них мой личный фаворит <a href="http://themeshaper.com/">тематический</a> . это очень трудно начать с нуля, поэтому эти ресурсы могут помочь вам взяться за дело.</p><p>чтобы изучить css, <a href="http://www.w3schools.com/css/default.asp">w3schools.com</a> является <strong> ресурсом </strong>. для многих дизайнеров <a href="http://getfirebug.com/">firebug</a> является незаменимым инструментом. не выходи из дома без этого!</p>

<p>шаг 1: создайте дочернюю тему с хорошей родительской темой. а. установите тематическую тему. б. следуйте их инструкциям по созданию детской темы. (переместите папку thematic-sample-child-theme вне тематической папки в папку wp-content/themes. теперь у вас будут/wp-content/themes/thematic и/wp-content/themes/thematic-sample- child-theme. c. переименуйте последний каталог в название новой предпочитаемой темы. d. откройте экран внешнего вида и активируйте новую тему.</p><p>шаг 2: отредактируйте styles.css и поэкспериментируйте с css. а. например, добавьте:</p><pre><code>#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; } </code></pre><p>начать проще всего с изменения цвета и шрифта, затем вы можете заняться более причудливыми вещами, такими как закругленные углы, плавающие деления и т.д.</p><p>шаг 3: используйте оригинальный style.css в каталоге/wp-content/themes/thematic в качестве руководства. действительно изучите этот стиль. используйте ссылку, например <a href="http://reference.sitepoint.com/css">http://reference.sitepoint.com/css</a> , чтобы помочь понять каждое правило.</p><p>с детской темой вы можете изменить столько, сколько захотите. например, некоторые изменят только логотип #brand, как показано выше. чем больше вы пытаетесь, тем больше вы узнаете.</p>

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

<p>килан упомянул firebug для firefox.</p><p>это действительно отличный инструмент, чтобы увидеть, как другие строят свои темы.</p><p>загрузите несколько классных тем, а затем используйте firebug для их изучения. это очень помогло мне, когда я начал.</p>