Forum portalu Fan-Strefa.pl Forum portalu Fan-Strefa.pl 

Autor Wątek: Jak zrobić łatwy wygląd pod wordpress!  (Przeczytany 6156 razy)

Camille

  • Fan
  • ***
  • Wiadomości: 337
  • Reputacja: 16
    • Status GG
    • Zobacz profil
    • CreativeDezign.pl
Jak zrobić łatwy wygląd pod wordpress!
« dnia: 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:
« Ostatnia zmiana: 10 Lipiec 2011, 12:30:15 wysłana przez kamilg124 »


kejtlin

  • Gość
Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #1 dnia: 10 Lipiec 2011, 12:49:35 »
początkującym na pewno sie przyda  8) dała bym plusa ale nie mogę  ???

Zoey

  • Fanatyk
  • ****
  • Wiadomości: 546
  • Reputacja: 6
    • Zobacz profil
Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #2 dnia: 10 Lipiec 2011, 12:50:43 »
Ja dam plusa :)

Camille

  • Fan
  • ***
  • Wiadomości: 337
  • Reputacja: 16
    • Status GG
    • Zobacz profil
    • CreativeDezign.pl
Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #3 dnia: 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.


Blair

  • Fanik
  • **
  • Wiadomości: 247
  • Reputacja: 3
    • Zobacz profil
    • Mój blog, mój świat.
Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #4 dnia: 11 Lipiec 2011, 19:47:57 »
Początkującym się przyda, z resztą mnie nawet też :) Dałabym plusa, lecz nie mogę.


Demetria Lovato ♡

Naughty

  • Fanatyk
  • ****
  • Wiadomości: 514
  • Reputacja: 9
    • Zobacz profil
Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #5 dnia: 12 Lipiec 2011, 21:23:37 »
Dzięki za tutorial, potem dam plusa;)
PHOEBE-TONKIN.FAN-STREFA.PL | DDLOVATO.PL | ARIANA-GRANDE.FAN-STREFA.PL [wkrótce]

Santana

  • Fanik
  • **
  • Wiadomości: 263
  • Reputacja: 0
    • Status GG
    • Zobacz profil
Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #6 dnia: 07 Luty 2013, 15:55:47 »
Początkującym się przyda, z resztą mnie nawet też :) Dałabym plusa, lecz nie mogę.
Being part of something special makes you special

Skye

  • Let's get fired up:)
  • Administrator
  • Fan Strefowicz
  • *****
  • Wiadomości: 1243
  • Reputacja: 81
    • Zobacz profil
    • Retro Creatives
Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #7 dnia: 01 Sierpień 2013, 17:22:01 »
I just wanna live fast, party hard,
make money, be a star
♥♥
Retroscream my name[/center]

Forum portalu Fan-Strefa.pl

Odp: Jak zrobić łatwy wygląd pod wordpress!
« Odpowiedź #7 dnia: 01 Sierpień 2013, 17:22:01 »