Diskuze: Dynamické stránky a wordpress...ujasnění myšlenek, než začnu psát

tbartolen

Člen

tbartolen:15.11.2014 10:48

Aloha. Dokončil jsem jakž takž základní statické stránku v HTML a CSS. Nyní bych chtěl jednotlivé obsahy na uvodní stránce vyplnit podstránkama a voláním na ně. Narazil jsem ale na několik problémů, který mi nejsou uplně jasný, a chtěl bych si trošku urovnat myšlenky, než začnu zběsile něco mlátit do klávesnice.
Na úvod vám sem hodím svoje HTMl a CSS na hlavní straně
HTML:

<!DOCTYPE html>
<html lang="cs-cz">
    <head>
    <title> Kelti stranky 2.0</title>
    <meta charset="utf-8" />

    <link rel="stylesheet" href="keltistyl_2.2.css" type="text/css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>

    <body class="body">
        <header class="mainHeader">
            <img src="images/kelti.jpg">
            <div id="nav">
                    <ul id="navmenu">
                            <li class="active"><a href="#">Úvod</a></li>
                            <li><a href="#">Muži</a>
                                <ul class="sub1">
                                    <li><a href="#">Soupiska</a></li>
                                    <li><a href="#">Novinky</a></li>
                                    <li><a href="#">Zápasy</a></li>
                                    <li><a href="#">Rozpis</a></li>
                                    <li><a href="#">B tým</a>
                                            <ul class="sub2">
                                                <li><a href="#">Soupiska</a></li>
                                                <li><a href="#">Novinky</a></li>
                                                <li><a href="#">Zápasy</a></li>
                                                <li><a href="#">Rozpis</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            <li><a href="#">Mládež</a></li>
                            <li><a href="#">Ženy</a></li>
                            <li><a href="#">Keltí shop</a></li>
                            <li><a href="#">Nižborský hokejbal</a></li>
                            <li><a href="#">Kontakt</a></li>
                            <li><a href="#">Sponzoři</a></li>





                    </ul>
            </div>
        </header>
         <div class="mainContent">
            <div class="content">
                <article class="topcontent">
                    <header>
                        <h2><a href="#" title="First post">First post</a>
                    </header>

                <footer>
                    <p class="post-info">This post is written by Tomas</p>
                </footer>
                <content>
                    <p>O uplynulém víkendu čekal na naši minipřípravku poslední</p>
                    <p>  ze série podzimních turnajů regionálního přeboru.</p>
                        Los byl tentokrát k našim nejmenším opravdu neúprosný,
                        <p>   když je v konkurenci dalších </p>
                </content>
                </article>

                <article class="bottomcontent">
                    <header>
                        <h2><a href="#" title="Second post">Second post</a>
                    </header>

                <footer>
                    <p class="post-info">This post is written by Tomas</p>
                </footer>
                <content>
                    <p>O uplynulém víkendu čekal na naši minipřípravku poslední</p>
                    <p>  ze série podzimních turnajů regionálního přeboru.</p>
                        Los byl tentokrát k našim nejmenším opravdu neúprosný,
                        <p>   když je v konkurenci dalších </p>
                </content>
                </article>
            </div>
        </div>
<aside class="top-sidebar">
                <article>
                    <h2>Top sidebar</h2>
                    <p>O uplynulém víkendu čekal na naši minipřípravku poslední</p>

                </article>
            </aside>
            <aside class="middle-sidebar">
                <article>
                    <h2>Top sidebar</h2>
                    <p>O uplynulém víkendu čekal na naši minipřípravku poslední</p>

                </article>
            </aside>
            <aside class="bottom-sidebar">
                <article>
                    <h2>Top sidebar</h2>
                    <p>O uplynulém víkendu čekal na naši minipřípravku poslední</p>

                </article>
            </aside>
        <footer class="mainFooter">
            <p>Copyright &copy; 2014 <a href="#" title="Skkelti.cz">Skkelti.cz</a></p>
        </footer>


    </body>

CSS:

 /*
Theme name: keltistranky 2.1 HTML5/CSS
Date: 8.11.2014
Description: Pokusy o udělání responsivních stranek a nastylování
Version: 2.1
Author: Tomáš Bartolen
Author URL: none*/

body {
    background-image: url('images/pozadikelti.png');
    color: #000305; /*barva pisma*/
    font-size: 87.5%; /*zakl. velikost pisma je 14px*/
    font-family: Arial, 'Lucida Sans Unicode'; /*budu menit*/
    line-height: 1.5;
    text-align: left;
}
a {
    text-decoration: none;
}
a:link, a:visited {
    color: #CF5C3F;

}
a:hover, a:active {
     background-color: #CF5C3F;
     color: #FFF;

}
/*stylovaní menu*/
/*=============================*/
ul#navmenu, ul.sub1, ul.sub2 {
    padding: 0px;
    margin: 0px;
}
ul#navmenu, ul.sub1, ul.sub2{
        list-style-type: none;
        }
ul#navmenu li {

    width: 125px;
    text-align: center;
    position: relative;
    float: left;
    margin-right: 4px;
}

ul#navmenu a {
    border: 1px solid green;
    text-decoration: none;
    display: block;
    width: 125px;
    height: 25px;
    line-height: 25px;
    background-color: #1C4E71;
    border-radius: 5px;
}

ul#navmenu .sub1 a {
    margin-top: 5px;
}
ül#navmenu .sub2 a {
    margin-left: 10px;
}
ul#navmenu li:hover > a {
    background-color: #CFC;
}

ul#navmenu li:hover a:hover { /*barva toho odkud sem odpichnutej, spojitost s hoverem predtim, vidis to*/
    background-color: #FF0;
}
ul#navmenu ul.sub1 {
    display: none;  /* tady znicim zobrazovani submenicek*/
    position: absolute;
    top: 26px;
    left: 0px;
}

ul#navmenu ul.sub2 {
    display: none;
    position: absolute;
    top: 0px;
    left: 126px;
}
ul#navmenu li:hover .sub1 { /*zobrazuje mi to do bloku vyjizdiciho*/
    display: block;
}
ul#navmenu .sub1 li:hover .sub2 {
    display:block;
}
/*konec menu*/
/*=======================*/
.mainContent {
    line-height: 25px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

}
.content {
    width: 70%;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.topcontent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin: 2%;
}
.bottomcontent {
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    padding: 3% 5%;
    margin: 2%;
}

.top-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    margin-top: 2%;
    padding: 2% 3%;
}
.post-info {
    font-style: italic;
    color: #999;
    font-size: 90%;

}
.middle-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;
}
.bottom-sidebar {
    width: 21%;
    float: left;
    background-color: #FFF;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-left: 3%;
    margin-bottom: 2%;
    padding: 2% 3%;
}

.mainFooter {
    width: 100%;
    height: 40px;
    float: left;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #1C4E71;
    margin: 2% 0;
}

.mainFooter p {
    width: 92%;
    margin: 10px auto;
    color: #FFF;
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
    .body {
    width: 90%;
    font-size: 95%;
        }
    .mainHeader img {
    width: 100%;
    }
    .mainHeader nav {
    height: 160px;

    }
    .mainHeader nav ul {
    padding-left: 0;
    }
    .mainHeader nav ul li {
    width: 50%;

    text-align: center;
    }
    .mainHeader nav a:link, .mainHeader nav a:visited {
    padding: 10px 25px;
    height: 20px;
    display: block;
    /* stylovani textu samotnyho v menu*/
    }
    /*obsahy*/

    .content {
    width: 100%;
    float: left;
    margin-top: 2%
    }
    .post-info {
        display: none;
    }
    .topcontent {
    background-color: #FFF;

    padding: 3% 5%;
    margin-bottom: 4%;
    }
    .bottomcontent {
    background-color: #FFF;

    padding: 3% 5%;
    margin-top: 3%;
    }
    .top-sidebar, .middle-sidebar, .bottom-sidebar {
    width: 92%;
    margin: 2% 0 2% 1.5%;
    padding: 2% 3%;
    }

}

Moje myšlenka je taková, že bych chtěl mít v "First post" takové uvodní novinky, jedne obrázek, krátký popisek k článku , a pod tím pár odkazů na další stránky. V Sidebaru si budu postupně programovat kalendář, galerii, a nějaké hotlines. Do Second post si chci dát to samé co do first post, ale například s tématikou dětí, nebo tak.

Moje otázka zní. Když začnu dělat dynamiku stránky, tak napíšu do top content do složky kontent nějakou include a get sekci...podle návodu tady na stránkách. Představoval bych si to asi takhle:

<div class="mainContent">
           <div class="content">
               <article class="topcontent">
                   <header>
                       <?php
                       $obsah = file_get_contents('podstranky/' .  $_GET['stranka'] . '.html');
                       echo $obsah;
                       ?>
               </article>

A podstránka by měla vypadat jednoduše takhle:

<article class="topcontent">
                   <header>
                       <h2><a href="#" title="First post">First post</a>
                   </header>

               <footer>
                   <p class="post-info">This post is written by Tomas</p>
               </footer>
               <content>
                   <p>O uplynulém víkendu čekal na naši minipřípravku poslední</p>
                   <p>  ze série podzimních turnajů regionálního přeboru.</p>
                       Los byl tentokrát k našim nejmenším opravdu neúprosný,
                       <p>   když je v konkurenci dalších </p>
               </content>
               </article>

A pak bych pod to někde dole rád napsal nějakou funkci, která by mi tam házela odkazy na další články z nějaké databáze, a nebo archivu...

Další otázka je, jestli pokud do toho pak nacpu Wordpress, jestli mi bude umět takhle udělané stránky dynamické přepínat...respektive měnit články na hlavní stránce a v contentech...

Je ten postup tak nějak logicky správný, nebo se to dělá uplně jinak, a já jsem uplně vedle?

Děkuju :-)

Odpovědět

15.11.2014 10:48

Navštiv www.fb.com/skkelticz

Tomáš Maňhal

Člen

Tomáš Maňhal:15.11.2014 10:59

Pokud už jsi někdy Wordpress zkoušel, tak určitě víš, že to co potřebuješ samozřejmě umí :-) Jen si musíš pak v té tvojí šabloně správně nalinkovat funkce z Wordpressu. Samotný Wordpress už pak zařídí, aby se ti na místa, kam si to nastyluješ a nalinkuješ, zobrazily nové články a podobně. První krok udělej ten, že si Wordpress nahraješ na localhost a pak si najdi co vše potřebuješ pro nasazení vlastní šablony, respektive co ta šablona musí obsahovat a jak má vypadat, protože Wordpress má samozřejmě svá pravidla pro šablony a jejich funkce.

PS: Žádnou funkci na výpis archivu psát nemusíš, Wordpress takové funkce už obsahuje v defaultní šabloně, doporučuji je použít. Vyhneš se zbytečným komplikacím.

Nevím jestli se tu vyskytuje přímo návod na wordpress šablony, ale já dělal podle http://musilda.cz/…o-wordpress/ . doporučuji!

Nahoru Odpovědět

15.11.2014 10:59

tbartolen

Člen

tbartolen:15.11.2014 11:04

Dobře, ale určitě bych měl asi před tim, než začnu šablonu připravovat pro wordpress, měl bych mít všechny sekce, které budou dynamicky nějak volat nějaký podstránky, už připravený, a zabezpečený...nebo to už si pak wordpress taky udělá sám, a mě stačí napsat statický stránky tak, jak je mám teď ?

Wordpress jsem právě ještě nepoužíval, jsou to moje vůbec první stránky, které tvořím

Editováno 15.11.2014 11:05

Nahoru Odpovědět

15.11.2014 11:04

Navštiv www.fb.com/skkelticz

Tomáš Maňhal

Člen

Tomáš Maňhal:15.11.2014 11:10

Všechno co potřebuješ najdeš v tom odkazu, který jsem ti napsal. Je to krok po kroku popsané, i pro laiky. Je toho potřeba udělat tolik, že to ani do komentáře tady napsat nejde, bohužel.

(Používej tlačítko "odpovědět", jinak si odpovědi nevšimnu)

Akceptované řešení
+20 Zkušeností
+2,50 Kč

Nahoru Odpovědět

15.11.2014 11:10

tbartolen

Člen

tbartolen:15.11.2014 11:14

Ok, zkusím se tim nějak prokousat,vypadá to docela strašidelně...:O děkuju.=)

Nahoru Odpovědět

15.11.2014 11:14

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:15.11.2014 11:29

Hlavní rozdíl je v tom, že on píše šablonu od začátku, a já bych chtěl tu svojí předělat pro wordpress, takže celou tu logiku budu muset nějak aplikovat na svůj projekt...to bude slušné peklíčko ]:>

Nahoru Odpovědět

15.11.2014 11:29

Navštiv www.fb.com/skkelticz

Tomáš Maňhal

Člen

Tomáš Maňhal:15.11.2014 11:40

Jde hlavně o to, že když pochopíš tu filosofii tvorby šablon, tak ji pak snadno aplikuješ na svůj projekt a hlavně ty zkušenosti jsou k nezaplacení při úpravě projektu na Wordpressu nebo dalších projektech :-)

Nahoru Odpovědět

15.11.2014 11:40

tbartolen

Člen

tbartolen:15.11.2014 11:49

To je pravda, začnu asi tím, že si přečtu, co všechno wordpress umí, abych nedělal například někde zbytečně obsahy, když je pak budu moct vypsat ve wordpressu, a tak dále. Myslel jsem si, že to už mám skoro hotové, ale asi to bude běh na další půl rok ...=D

Nahoru Odpovědět

15.11.2014 11:49

Navštiv www.fb.com/skkelticz

Tomáš Maňhal

Člen

Tomáš Maňhal:15.11.2014 11:54

Když tomu obětuješ pár dní tak to dotáhneš do konce :-) Není to tak složité, jak to na první pohled vypadá :-)

Nahoru Odpovědět

15.11.2014 11:54

tbartolen

Člen

tbartolen:15.11.2014 13:57

No nevím no, jsem zaseklej hned u druhé stránky toho návodu.
V Headeru mi to píše okamžitě červenou hlášku, že tohle z nějakýho důvodu je špatně:

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
        charset=<?php bloginfo('charset'); ?>" />

A to nekomentuju, že celej ten kód je pro mě písmenková polívka.
A pak píšou že uděláme footer, na kterým uzavřeme div z headeru...

</div>

<div class="footer">

  <div class="copyrights">
         Copyright &copy; <?php echo date("Y") ?> |  Všechna práva vyhrazena |
    <a href="<?php echo home_url(); ?>/"  title="<?php bloginfo('description'); ?>">
    <?php bloginfo('name'); ?></a>
  </div>

</div>
        <!-- Theme Hook -->
        <?php wp_footer(); ?>

<!--END body-->
</body>
<!--END html-->
</html>

To taky jaksi nefunguje, a ani nevim jak bych měl uzavírat div z jiné stránky na jiné stránce...neni to moc napsaný pro začátečníky. Píše tam bum bum zkopíruj tohle tohle naflákej tamhle...a člověk ví hovno co dělá, a stejně to nefunguje ve výsledku :-/

Nahoru Odpovědět

15.11.2014 13:57

Navštiv www.fb.com/skkelticz

tbartolen

Člen

tbartolen:15.11.2014 14:12

Mno, tak po přečtení prvních dvou článků na musildě, a vyzkoušení, že tohle dohromady nedám, nejspíše použiju NERS a nebo ten druhý v MVC co se popisuje tady...wordpress nemám nárok rozchodit.

Nahoru Odpovědět

15.11.2014 14:12

Navštiv www.fb.com/skkelticz

Tomáš Maňhal

Člen

Tomáš Maňhal:15.11.2014 14:49

Ono jde o to, že nikde nemáš stránku která by klasicky začínala headerem a končila footerem, ty vytvoříš header, content, footer jako stránky zvlášť a pak se pomocí funkcí v PHP volají a spojují dohromady :-) Zkus si v tom wordpressu rozpitvat tu základní šablonu, je ještě relativně jednoduchá. dokonce samotná Administrace wordpressu nabízí editor, kde si všechny soubory šablony otevřeš a edituješ :-)

Nahoru Odpovědět

15.11.2014 14:49