Forum portalu Fan-Strefa.pl

Dla webmastera => Tutoriale => Wątek zaczęty przez: Camille w 10 Lipiec 2011, 12:26:42

Tytuł: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: Camille w 10 Lipiec 2011, 12:26:42
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>

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(); ?>

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>

The footer.php file

Dodajcie ten kod do pliku footer.php:

Cytuj
<div id="footer">
  <h1>FOOTER</h1>
</div>

</div>

</body>
</html>

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;
}


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:
(http://www.siteground.com/knox/tutorials/uploaded_images/images/wordpress/wrdp-theme2.jpg)
Tytuł: Odp: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: kejtlin w 10 Lipiec 2011, 12:49:35
początkującym na pewno sie przyda  8) dała bym plusa ale nie mogę  ???
Tytuł: Odp: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: Zoey w 10 Lipiec 2011, 12:50:43
Ja dam plusa :)
Tytuł: Odp: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: Camille w 10 Lipiec 2011, 12:52:59
Dziękuje bardzo niedługo dodam tutka jak pociąć panel na newsy i umieścić tytuł w nich itp.
Tytuł: Odp: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: Blair w 11 Lipiec 2011, 19:47:57
Początkującym się przyda, z resztą mnie nawet też :) Dałabym plusa, lecz nie mogę.
Tytuł: Odp: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: Naughty w 12 Lipiec 2011, 21:23:37
Dzięki za tutorial, potem dam plusa;)
Tytuł: Odp: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: Santana w 07 Luty 2013, 15:55:47
Początkującym się przyda, z resztą mnie nawet też :) Dałabym plusa, lecz nie mogę.
Tytuł: Odp: Jak zrobić łatwy wygląd pod wordpress!
Wiadomość wysłana przez: Skye w 01 Sierpień 2013, 17:22:01
http://wydaje.pl/ebooks/scrap/162/Szablony-WordPress--tworzenie-szablonow-na-platforme-WordPress polecam przeczytaniu darmowego fragmentu, tak na początek:)