De ultimă oră
Initiere in coding – Cum sa codezi o thema WordPress
Uite-ne ajunşi la partea a 5-a seriei de tutoriale de iniţiere în conding. Terminăm repede, zic eu. Asta poate şi pentru că nu pot numi ceea ce fac eu un tutorial complex. Dar dacă aveţi un minim de cunoştinţe CSS şi HTML n-ar trebui să aveţi probleme în parcurgerea lui.
Spuneam că e ultima parte, nu? Ei bine? Ce-a mai rămas? Conform schiţei din Photoshop, postmetadata.
Să începem, zic! Vom edita, pentru început, index.php. Vom căuta:
<p class="postmetadata"> <?php _e('Filed under:'); ?> <?php the_category(', ') ?> <?php _e('by'); ?> <?php the_author(); ?><br /> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p>
şi îl vom înlocui cu:
<p class="postmetadata"> <?php _e('author: '); ?><?php the_author(); ?> <?php _e('filed under:'); ?> <?php the_category(', ') ?> <?php _e('posted on: '); ?> <?php the_time('j F Y'); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?> <?php edit_post_link('Edit', ' | ', ''); ?> </p>
Observaţi că s-a schimbat puţin aşezarea link-urilor şi a textului din postmetadata, nu? Acum va trebui să stilizăm puţin lucrurile astfel încât rândul nou format să fie înconjurat de un chenar, exact aşa cum este în Photoshop. Deschidem style.css şi edităm p.postmetadata, astfel încât avem:
p.postmetadata{ border: 1px solid #b5b38f; background: #e2e0b6; margin: 0; text-align: right; }
Am terminat? Cred că da. Template-ul vostru arată ca cel din Photoshop, nu? Şi al meu la fel.
Acum, ca un fel de bonus … sau cum se zice, surpriza din oul Kinder, am să pun spre download thema nou făcută ca să vă puteţi compara munca voastră cu a mea (teoretic, ar trebui să arate la fel).
Dacă vreţi cu adevărat să învăţaţi să codaţi şi aţi descoperit tutorialul mai târziu, ideal ar fi să-l urmaţi mai întâi şi deabia după aceea să downloadaţi arhiva.
2 Comments
Astea le-ai facut u?
@Rarutzoo, da