FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:

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

V předchozím kvízu, Online test znalostí PHP, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
tbartolen
Člen
Avatar
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...res­pektive 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
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na tbartolen
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
Avatar
tbartolen
Člen
Avatar
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
Nahoru Odpovědět
15.11.2014 11:04
Navštiv www.fb.com/skkelticz
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na tbartolen
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č
Řešení problému
 
Nahoru Odpovědět
15.11.2014 11:10
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš Maňhal
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
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš Maňhal
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
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na tbartolen
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
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš Maňhal
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
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na tbartolen
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
Avatar
tbartolen
Člen
Avatar
Odpovídá na Tomáš Maňhal
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
Avatar
tbartolen
Člen
Avatar
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
Avatar
Tomáš Maňhal
Člen
Avatar
Odpovídá na tbartolen
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
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 12 zpráv z 12.