Dla webmastera > Tutoriale

Jak zrobić łatwy wygląd pod wordpress!

(1/2) > >>

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

[0] Indeks wiadomości

[#] Następna strona

Idź do wersji pełnej