HTML, JS + CSS vienā wordpress lapā (page)

[kapeika]

Sveiki!

 

Saskāros ar problēmu, ar kuru nevaru tikt galā, iespējams, ka Wordpress speciālisti spēs palīdzēt. Sākšu ar funkcijas izklāstu - 

 

Transporta kustības saraksts, kas parāda rezultātus atkarībā no lietotāja izvēlētajiem kritērijiem dropdown sarakstā.

 

Piemērs, ko atradu internetā un pārveidoju nedaudz, lai parādītu piemēru - http://jsfiddle.net/EFM9b/30/(dropdown boxos izvēlieties pirmos variantus, jo tikai ar tiem parādīs rezultātu).

 

Lieta tāda, ka es nevaru tikt skaidrībā, kā šo maitu varētu iegrūst wordpress lapā. Negribētos izmantot iframe, bet, pat ja to izmanto, kā savienot JS ar CSS, lai HTML fails to tiešām nolasītu (zinu, ka tas izklausās diezgan lame, bet mēģināju norādīt ceļus uz CSS un JS - funkcijas nestrādāja kā JSFiddle piemērā, t.i. - neizmeta rezultātu, it kā CSS bloks nenostrādātu vai arī JS funkcija.

 

Domāju, ka CSS gan jau var norādīt kaut kādā quick css vai arī iekšā pašā html (caur <style>), bet kā būt ar JS?

 

Man teorētiski derētu jebkurš risinājums, kas derētu wordpress un funkcionālitāte būtu +/- tāda pati, bet, cik meklēju pluginus, neizskatās, ka tie palīdzētu (WP Types, WP Layouts u.t.t.).

 

Varbūt kāds zina gatavu pluginu (pat maksas), kas strādātu pēc šāda principa?

 

Mērķis ir tāds - lietotājs izvēlas autobusa maršrutu, rajonu, virzienu un viņam izlec pēc izvēlētajiem kritērijiem divkolonnu saraksts ar laikiem, kad autobuss pienāk izvēlētajā pieturā (rajonā).

 

Neder pilna transporta tabula, tāpēc ka tā ir neērta mobilo ierīču lietotājiem, bet mērķauditorija tiek plānota ap 80% no šīm ierīcēm.

 

Iepriekš pateicos!

[foxsk8]

Uztaisi jaunu lapu, piemeram page-karte.php

 

Ieks page-karte.php norādi shadi:

<?php
/*
Template Name: Karte
*/
get_header(); ?>

Tad Wordpresa uztaisi jaunu lapu, ar nosaukumu Karte un laba sana tev bus iespeja izveleties page template. 

 

HTML dalu, tu jau saliksi ieks page-karte.php, JS tu uztaisi piem script.js, ko includo vai nu footer.php vai header.php shadi:

<script src="<?php bloginfo( 'stylesheet_directory' ); ?>/js/custom-script.js"></script>

Tatad, skina mape, tev jauztaisa JS folderis un JS kods jaievieto custom-script.js faila. Attiecigi shadi vari papildinat ari css, inkludod jaunu css. Protams, shis vienkarsais veids, parasti css un JS register taisa ar add_action funkcijam, attiecigi, palasi WP Codex. 

[kapeika]

Paldies par atbildi, ja godīgi uzvedināja uz pareizajām domām (kaut arī pats apraksts arī ir pareizs), bet izdarīju nedaudz savādāk - 

 

- tā kā man ir pirktā tēma un ar katru update negribu editot tēmas CSS, es izdarīju sekojoši (varbūt tieši tāpēc man līdz galam neiet) - 

 

CSS pievienoju pluginā Simple Custom CSS (nolasīja, jo mēģināju vispār bez css un pēc tam pievienojot to).

Pašu HTML ievietoju wordpress lapas contentā (caur html editoru)

JS - brutāli ieliku augšpusē attiecīgās lapas templeitam (kas tieši šķiet ir vaininieks pie funkcijas nepilnības (man tiešām ar tām inklūdošanām ir problēmas)).

 

Pati lapa tagad -

 

Tātad, es pats pieļauju, ka problēma ir tieši nepareizā JS skripta izsaukšanas koda daļā (vai tā atrašanās vietā).

 

Tēmas struktūra pēc folderiem - http://i11.pixs.ru/storage/4/6/5/strukturaj_7421976_17286465.jpg

 

Lapas templeita fails - http://pastebin.com/6E4qNNSR

 

Tēmas funkciju fails - http://pastebin.com/LysgpMdd

 

Tēmas headerī viens no svarīgākajiem ir laikam tas, ka tiek izsaukts wp_head, kur, pēc manas intuīcijas, arī tiek glabāti tie js un css failu inklūdes (vai arī funkcijās).

 

Man šķiet, ka varētu lapas templeita failā pareizi ievietot js koda izsaukšanu vai arī izsaukt šo failu iekš funkcijām, jo kaut kas līdzīgs tur jau ir - 

	wp_enqueue_script( 'listify', get_template_directory_uri() . '/js/app.min.js', $deps, 20141204, true );
	wp_enqueue_script( 'salvattore', get_template_directory_uri() . '/js/vendor/salvattore.min.js', array(), '', true );

Tagad dodos prom no darba, bet vai nevajadzētu strādāt, ja es augstākminētajam skriptam pievienotu šo? - 

wp_enqueue_script( 'listify', get_template_directory_uri() . '/js/transport.js', $deps, 20141204, true );

Paldies.

Edited June 17, 2015 by kapeika

[foxsk8]

Bez lieka čakara, lieto kā teicu.

 

wp_head protams paņems visus wp_enqueue_script. 

 

Ja gribi atjaunot skinu, utt.. cores, utt.. tad uztaisi vienkārši pluginu, kurā iemet to pašu functions.php wp_enqueue_script funkcijas. Skins atjaunosies, core arī a tavs plugins dzīvos neatkarīgu dzīvi. 

 

Paņem to pašu hello.php demo pluginu, tur augšā būs uzstādījumi plugina nosaukumam, un tajā tu visu vari darīt. 

 

Kaut vai uztaisīt template include if page ir tāds un tāds. 

 

https://codex.wordpress.org/Conditional_Tags

 

https://codex.wordpress.org/Function_Reference/get_template_part

Edited May 13, 2015 by foxsk8

[kapeika]

Kaut nošauj nesanāk. Izmēģināju pat vairākus pluginus, kur var norādīt pašā postā ceļus uz css/js, kā arī mēģināju pievienot javascript failu gan atsevišķi, gan izsaucot ar wp-enqueue_script, mēģināju arī pa tiešo kopēja js failā iemest - skatoties pēc developer tools manis izsauktais saraksts.css izsaucas norādītajā lapā, bet javascripts nevienā variantā negrib izsaukties.

 

Varbūt pie vainas varētu būt, ka mans js fails ir minificēts un tam ir atsevišķs mappings? Jau nedēļas 2 ar šito maitu laužu galvu -_- =/

Edited June 17, 2015 by kapeika

[kapeika]

Nedaudz ilgāk pagūglēju, un atradu kaut ko saistītu tieši ar jsfiddle - tā kā es kodu ņēmu brutāli no katra lauka un kopēju iekšā tam attiecīgājā JS/CSS failā, varbūt man viņu vajag kaut kā pārveidot?

 

"In JSFiddle, when you set the wrapping to "onLoad" or "onDomready", the functions you define are only defined inside that block, and cannot be accessed by outside event handlers.

Easiest fix is to change:

function something(...)

To:

window.something = function(...)"

 

Vai šis nevarētu būt pie vainas?

 

P.S. Atvainojos par dubultu postu.

[Леший]

Tur tev kodā:

 $('.result').filter('[data-route="' + route.val() + '"][data-region="' + region.val() + '"][data-direction="' + direction.val() + '"]').addClass('active');

Bet es neredzu nevienu elementu, kas kaut kad vispār varētu atbilst:

<div class="result" data-preference="mountains" data-style="none" data-gender="none">Option 27: Mountains, None, None</div>

P. S. Runājot par "onLoad wrapper" - tā ir. Mainīgie, kas ir definēti onLoad ķermenī, ir pieejami tikai tur. Vispār, ļoti reti kad iekš onLoad vajag kaut ko definēt. Bet tam nav nekāda sakara ar tavu problēmu.

[kapeika]

Леший, es uztaisīju tikai vienu variantu, kas atbilst (jo es pārveidoju kādam jau esošu kodu).

<div class="result" data-route="8-route" data-region="majori" data-direction="riga">8. autobusa laiku sarakst no Majoriem uz Rīgu</div>

Šajā var izvēlēties pirmos variantus un apskatīties rezultātu, ko mēģinu dabūt. Šo te sanāca ietūcīt caur iframe -

 

Sanāk, ka es kaut ko nepareizi daru definējot vai pievienojot js/css/html @ wordpress =/

 

Varbūt labāks variants ir veidot kaut ko šādu?

 

Uztaisu custom taksonomijas tieši transportam, pēc tam atrodu kādu pluginu (tikai velns viņu zina kādu), kurš meklē rezultātus pēc taksonomijām?

 

It kā šis variants nav tik grūts, bet tā kā rezultātām pēc multiple selection vienmēr jābūt vienam, tad būtu labi, ja rezultāts tiktu parādīts bez lapu refreshiem un pilnā saturā uzreiz nevis kā links uz ierakstu/postu/page.

Edited June 17, 2015 by kapeika