[CMS Systems]Wordpress Theme Development Homework 5


4

 

5. Pick a template from http://www.css3templates.co.uk/ and convert it to a simple WordPresstemplate. The theme should be:
•Activated properly
•Working landing page with static content
•Working blog index with latest blogs

Вкарах този css + html5 темплейт:  http://www.css3templates.co.uk/templates/CSS3_bokeh/index.html
в WP като съм разделил съдържанието съответно в: 
index.php, header.php, sidebar.php

style.css и functions.php
петте файла

 

  • Заменил съм заглавията на постовете с:

<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a> (така са и линкове към съответните статии)

  • за пътищата към js файловете:

<?php bloginfo('template_url'); ?>/js/jquery.js 
(вижте отговорът на Марио)

  • за снимките (както Марио каза):

<?php echo get_template_directory_uri(); ?>/images/twitter.png

  • за title тага:

<?php bloginfo('name'); ?> <?php wp_title(); ?>;

  • линк към home:

<?php echo get_option('home'); ?>
(погледнете отговорът на Марио (home_url()))

 
Регистрирах menu и sidebar (може да се види как във файлa functions и как са извикани в header.php и sidebar.php). Особеното е да се синхронизират класовете и id-тата.

В sidebar-a съм използвал вградения widget за "recent posts" и два text widget-a като те приемат html текст.

В settings/reading има опция да се избере статична страница за начална и да се смени тази за постове. За целта трябва да се създадът съответните две страници, като тази за постовете се оставя празна.


Ето как изглежда  проекта:
http://www.bobbykolev.cloudvps.bg/blog/

 

 

линк към темата с всички задачи от домашното
 




Отговори



1

 

Условие: Pick a template from http://www.css3templates.co.uk/ and convert it to a simple WordPresstemplate. The theme should be:

  • Activated properly
  • Working landing page with static content
  • Working blog index with latest blogs
 

Решение: Взех CSS3 Bokeh темаплейта и го вградих в WordPress, като направих следните страници:

  1. style.css

    Там съм сложил всичките ми стилове
     
  2. index.php

    Там, като цяло съм заменил заглавие с       <h1><?php the_title(); ?></h1>, и съдържанието с <?php the_content(); ?>. Също така съм добавил и няколко екстри:
  3. header.php

    В <html> тага съм добавил <?php language_attributes(); ?>

    Тук съм заменил заглавието на темплейта с <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>.

    Променил съм и пътя на стиловете с <?php bloginfo('stylesheet_url'); ?>.

    Използвах функцията, която Марио каза <?php wp_head()  ?> точно преди затварящия </head> таг.

    Другото, което съм заменил е линка на лого, за да може, когато се натисне върху него да бъде препратено към front-page.php с <?php echo home_url(); ?> и малко по-надолу съм извикал sidebar-a с <?php get_sidebar('sidebar'); ?> .
     
  4. footer.php

    Тук съм пътищата на картинките с <?php echo get_template_directory_uri(); ?>, a пътищата на скриптовете с <?php bloginfo('template_url'); ?>

    В края съм сложил функцията <?php wp_footer(); ?>.
     
  5. front-page.php

    Това е тази страница, която се зарежда по подразбиране или т.н. Home page.
     
  6. 404.php

    404.php се зарежда, когато даденa страница не може да бъде намерена. Сложим един бутон, който при натискане препраща към Home page-a <?php echo get_option('home'); ?>
     
  7. functions.php

    Там съм регистрирал менюто, sidebar-a и функция, която изписва даден параграф под всяка публикация 
     
  8. license.txt

    В този файл съм сложил цялото съдържание на GNU General Public License.

Опитах се да направя CSS-a по стандартите на WordPress, като например, когато се изброяват селекторите, те трябва да са на нов ред и т.н., но е много объркващо да стилизираш нормалния HTML и този, който WordPress създава.

Ето линк към файловете на темплейта.

 


от DGrigorov (678 точки)


4

Изглежда доста добре, два малки коментара:

1. има функции home_url() и site_url(), които могат да се ползват

2. jQuery външно не трябва да се ползва, може да се викне директно wp_enqueue_script('jquery'). Последното обаче трябва да се вика на wp_enqueue_scripts или admin_enqueue_scripts куките, по-конкретен пример - http://wcnorge.devwp.eu/mind-your-javascript/#17


от Mario Peshev (0 точки)


0
Да, благодаря ти за светкавичния feedback Марио. Ето още инфо за второто: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

от bobbykolev (4168 точки)


0

Здравейте!

Аз не съм съвсем сигурна, че разбрах заданието на тази задача - като инсталираме темплейт, трябва да му изтрием всичките файлове index.php, header.php, sidebar.php и functions.php и да си напишем наши нови, по-простички ли?


от nevtod (1087 точки)


0
Трябва да си свалиш един темплейт от дадения линк в домашното и да го интегрираш в Wordpress.

от DGrigorov (678 точки)

0
Трябва да си намериш HTML темплейт и да го направиш на WordPress тема. Т.е. намираш темплейт само от html, css и JavaScript файлове. След това си правиш въпросните php файлове.

от kanchev_k (319 точки)



0

В отговор на тази тема: http://forums.academy.telerik.com/84074/%D0%BC%D0%B0%D0%BB%D1%8A%D0%BA-%D0%BF%D1%80%D0%BE%D0%B1%D0%BB%D0%B5%D0%BC-%D1%81-cms

 

Отваряш си страницата и натискаш PrtScr клавиша (принт скриин) след това отваряш paint или подобна (аз ползвам Paint.NET)  и правиш past. Ако знаеш как може да си изрежеш само съдържанието може да го оформиш и  го записваш в директорията на темата (където ти е style.css) с име screenshot.png
и вече ще имаш картинка в admin page.

от kanchev_k (319 точки)


0
Сега започвам да правя тази задача, но се зачудих какво реално трябва да предадем като домашно? Само папката на нашата тема в wp-content\themes или и още нещо?
Доколкото разбирам, ако темата е написана правилно, и подменя папката на темата в wp-content\themes, би трябвало всичко да си работи, без значение от данните в БД - име на БД, къде е инсталиран целия WP и пр.? Вярно ли е това?
Поздрави
Невена

от Nevencheto (587 точки)


0
Напълно вярно. Може да я тестваш лесно ако имаш собствен блог на Wordpress и пробваш да я сложиш там :)

от Teodor92 (13062 точки)

0
благодаря :)

от Nevencheto (587 точки)


0
Здравейте колеги,
имам проблем с регистрирането на менюто в 5та задача от домашното. Доколкото виждам във видеото във файла functions.php добавям следния ред:
register_nav_menu ('my_top_menu', 'My top menu');
след което би трябвало в Admin -> Appearance -> Menus да мога да си видя менюто, което съм регистрирал. Проблема ми е, че такова не се създава. Някой може ли да ми помогне или да ми даде някакви насоки къде може да бъркам?

от Evgeni Atanasov (0 точки)


0
В Admin -> Appearance -> Menus горе има един бутон с плюс. С него си създаваш менюто. После пак от Admin -> Appearance -> Menus в Theme Locations си избираш менюто. Натам мисля ще се оправиш.

от kanchev_k (319 точки)

0
Да, виждам именно този бутон с плюса, но си мисля, че ако правя всичко коректно, след регистрирането на менюто във functions.php би трябвало да го видя в ... -> Menus?

от Evgeni Atanasov (0 точки)



0
Дайте идея как да кача последната задача за WP,защото без база данни не работи. Ако експортна базата ще е голяма занимавка за проверяващите. Единствено се сещам да го кача на моя сървър и да дам линк.

от werew (576 точки)


0
Само папката на темата ти която е в themes. Трябва така да си направил темата, че това да е достатъчно. Защо не работи без база? Може да имаш проблеми с оценката ако не стане както е по задание :(

от bobbykolev (4168 точки)

0
Мерси. Изобщо не се замислих, че само темата ми трябва :DD

от werew (576 точки)


2

Малко след дъжд качулка, но се сетих, че имам една много хубава книжка

Building WordPress Themes From Scratch

Всичко е описано подробно стъпка по стъпка, на разбираем език.

Ако някой мисли, че ще му е полезна, да ми драсне едно лс.

Има я и в нета, ако потърсите.


от arabella (2576 точки)


2

И аз пускам моята тема, наречена Flowers. Като цяло просто се ръководих по видеото на Марио и също така гледах да инкорпорирам съветите от отговорите на bobbykolev и daniel.grigorov.. Забелязах, че едно и също нещо може да се направи по много различни начини и затова явно на човек му трябва да натрупа опит, за да разбере кой начин е най-добрия. Например аз лично не съм особено добър в CSS-а и затова почти не съм го пипал (само смених линковете да не се подчертават), ами ползвах функциите при регистрирането на sidebar и nav menu (before, after, container, container class, container id и т.н.), за да го нагодя и да изглежда като темплейта.


от AlexPopov (1568 точки)


0
Здравей, въпреки , че вече е изтекъл срока за домашното има някои неща, на които да обърнеш повече внимание. 1. screenshot.png - мисля, че му е неоправдано голям размера. Темите, които се инсталират по подразбиране имат screenshot-и с размери 600х450, ~160kb 2. page-blog.php.php - да не си го преименувал през някое IDE :) Те ти предоставят възможност да си смениш само името на файла, като си му слагат след това разширението, а ти по инерция си написал цялото име заедно с .php 3. Обърни внимание че всеки един widget в сайдбара е обвит в див с клас sidebar. Ти правилно си регистрирал sidebar, и 'before_widget' => '
', 'after_widget' => '
', но мисля, че е трябвало да сложиш и класа 'before_widget' => '
', 'after_widget' => '
', 4. header.php - не е добре да оставяш код, който е закоментиран и не върши никаква работа.

от pdrenovska (2196 точки)

0
Мерси, много полезни коментари, ще го имам предвид :)

от AlexPopov (1568 точки)