Det tager ikke lang tid inden man synes at layout på WEB-sitet skal laves om. Der er godt nok 2678 “themes” at vælge imellem, men man kan jo ligeså godt lave sin egen, og det er ikke så svært.
Jeg har baseret mit paa “Twenty Ten” hvor jeg har
- Lidt mere plads til “The World needs….”
- Fjernet det skarpe sorte look – det er nu lysegråt
- Forsiden indeholder nu kun excerpts
- Login/Logout i menu barren, højre-stillet
Disse ændringer illusterer ganske godt de forskellige måder man kan gribe det an på
Det hele foregår i et nyt directory der er oprettet til det
/var/www/peter.lorenzen.us/wp-content/themes/twentyten-child
I style.css beskriver man at dette er et “child theme” og vi arver de fleste af de originale opsætninger, her er hvordan min ser ud nu.
/* Theme Name: Twenty Ten Child Theme URI: http://storepeter.dk/themes/twentyten-child Description: Twenty Ten Child Theme Author: Peter Lorenzen Author URI: http://storepeter.dk Template: twentyten Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyten-child */ @import url("../twentyten/style.css"); #site-info { float: left; font-size: 18px; font-weight: bold; width: 700px; } #site-title { float: left; font-size: 30px; line-height: 36px; margin: 0 0 18px 0; width: 570px; } #site-description { clear: right; float: right; font-style: italic; font-size: 18px; margin: 15px 0 18px 0; width: 350px; } /* This is the custom header image */ #branding img { border-top: 0px; border-bottom: 0px; display: block; float: left; } .header-img { display: none; } .home .header-img { display: block; } #access { background: #eee; display: block; float: left; margin: 0 auto; width: 940px; } #access .menu-header, div.menu { font-size: 20px; margin-left: 12px; width: 928px; } #access ul ul a { background: #ddd; line-height: 1em; padding: 10px; width: 160px; height: auto; } #access ul ul :hover > a { background: #ddd; color: #333; } #access ul li.current_page_item > a, #access ul li.current_page_ancestor > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { font-weight: bold; color: #000; } * html #access ul li.current_page_item a, * html #access ul li.current_page_ancestor a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { color: #888; background: #ccc; } #menu-login-logout { float: right; }
For kun at have billede på forsiden er det nødvendigt at lave lidt om på header.php.
Den er kopiereret over fra den originale, jeg har lave følgende ændringer:
peter@blog:/var/www/peter.lorenzen.us/wp-content/themes/twentyten-child$ diff -Naur ../twentyten/header.php header.php --- ../twentyten/header.php 2014-09-27 20:56:15.600408218 -0400 +++ header.php 2014-09-28 17:39:55.125767502 -0400 @@ -51,6 +51,10 @@ * as styles, scripts, and meta tags. */ wp_head(); + if ( function_exists( 'my_head' ) ) { + echo "\n"; + my_head(); + } ?> @@ -96,7 +100,9 @@ $header_image_height = HEADER_IMAGE_HEIGHT; } ?> - + + +