Dla webmastera > Tutoriale
Jak zrobić łatwy wygląd pod wordpress!
Camille:
Więc znalazłem ten tutek na stronie "www.siteground.com" więc postanowiłem przetłumaczyć go co zajęło mi długi czas więc mam nadzieje że dostane plusika.
* header.php - Tutaj powinien znajdować się kod do headera strony;
* index.php - Plik główny do całego thema. Będzie zawierał kod na notki;
* sidebar.php - Tutaj znajdą się całe panele poboczne;
* footer.php - Ten plik będzie zawierał stopkę;
* style.css - Tutaj będziecie mogli zmieniać kolory całej strony;
header.php plik
W ten plik wklejcie ten kod:
--- Cytuj ---<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
--- Koniec cytatu ---
Po tytule dodajmy linijkę "<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">" Mówi to wordpressowi by załadować styl z stylesheet.css. To wystylizuje waszą stronę . Ta część <?php bloginfo('stylesheet_url'); ?> która ładuje cały plik css i stylizuję stronę.
Następnie dodaliśmy znak "div" z kasą wrapper który jest głównym kontenerem całej strony. Daliśmy tą klasę w ten sposób dzięki czemu możemy umieszczać rzeczy poprzez style.css plik.
index.php plik
--- Cytuj ---<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Main Area</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr>
<?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter"></div>
<?php get_footer(); ?>
--- Koniec cytatu ---
Kod zaczyna się od <?php get_header(); ?> Który pokaże cały kod w pliku header.php w index. Używa to funkcję już wbudowaną w wordpress. Opowiemy o tym później w tym tutorialu. Potem dodaliśmy miejsce na Główny tekst to by pokazać które miejsce waszego themea jest pokazane w tym miejscu.
Następne linie pokazują PHP kod oraz wordpressowe funkcję.Ten kod pozwala nam na pokazywanie newsów które napisaliście w danym miejscu.
Potem dodajemy sidebar.php plik w tą linie - <?php get_sidebar(); ?>. W tym pliku możecie pokazać wasz side bar.
Po tym miejscu daliśmy pusty "div" To odzieli sidebar, główny text i stopkę od siebie.
Wkoncu dodajemy ostatnią linie - <?php get_footer(); ?> który wyświetli wam stopkę.
sidebar.php plik
Dodajcie ten kod do sidebar.php :
--- Cytuj ---<div id="sidebar">
<h2 class="sidebartitle"><?php _e('Categories'); ?></h2>
<ul class="list-cat">
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 class="sidebartitle"><?php _e('Archives'); ?></h2>
<ul class="list-archives">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
--- Koniec cytatu ---
The footer.php file
Dodajcie ten kod do pliku footer.php:
--- Cytuj ---<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
--- Koniec cytatu ---
Ten kod pokaże text jaki chcecie na samym dole strony. Możecie dodać tam linki, zdjęcia oraz informacje o Copyright.
style.css plik
Dodaj te linijki do pliku style.css:
--- Cytuj ---body {
text-align: center;
}
#wrapper {
display: block;
border: 1px #a2a2a2 solid;
width:90%;
margin:0px auto;
}
#header {
border: 2px #a2a2a2 solid;
}
#content {
width: 75%;
border: 2px #a2a2a2 solid;
float: left;
}
#sidebar {
width: 23%;
border: 2px #a2a2a2 solid;
float: right;
}
#delimiter {
clear: both;
}
#footer {
border: 2px #a2a2a2 solid;
}
.title {
font-size: 11pt;
font-family: verdana;
font-weight: bold;
}
--- Koniec cytatu ---
W tym kodzie powinniście edytować wszystkie kolory strony i miejsca podane znacznikami "div" ten tutorial pokazał wam jak stworzyć stronę która wygląda tak:
kejtlin:
początkującym na pewno sie przyda 8) dała bym plusa ale nie mogę ???
Zoey:
Ja dam plusa :)
Camille:
Dziękuje bardzo niedługo dodam tutka jak pociąć panel na newsy i umieścić tytuł w nich itp.
Blair:
Początkującym się przyda, z resztą mnie nawet też :) Dałabym plusa, lecz nie mogę.
Nawigacja
[#] Następna strona
Idź do wersji pełnej