Beágyazás RESZPONSIVITÁS

Archívum 2006-2018.11.09 bovitmenyek
#1

Kedves Fórumozók!

Egy olyan problémával szembesültem a DFD Native témánál amit az oldalam használ, hogy remélem tudtok valami megoldást.

Amikor egy bejegyzést vagy terméknél leírást készítek és beszúrok egy termékem URL-jét akkor az megoldható, hogy responsive legyen? Mivel a termék url-nél saját magam adok meg azt a méretet amivel mobilon nézve a beszúrt termék a kijelző méretét figyeli és ehhez állítja be a megjelenítést. Pl.: [embed width=“315” height=“157”]https://avc.hu/termek/sh-17/[/embed]

De van olyan egyedi CSS kód amit ha megadok akkor nem kell nekem manuálisan a méretet megadni?( width=“315” height=“157”)

Köszönöm a választ előre is.

 

#2

Szia!
A terméket hogyan akarod beágyazni? Csak sima URL-ként, vagy képi megjelenítéssel, leírással? Ha csak URL-ként, akkor felesleges az embed, csak simán ezt a formát használd: Tekintse meg ajánlott termékünket

Ha viszont rendesen meg akarod jeleníteni a terméket/termékkategóriát, akkor a Woocommerce saját shortcode-ja kell neked.

Itt megtalálod az összes shortcode-t

#3

szerk: ha ragaszkodsz a megoldásodhoz, és nem feltétlen kell pontosan 315 px szélesnek lennie, akkor megpróbálhatod azt is, hogy a width-nek 100% -os értéket adsz.

Ha ez így nem működik, akkor az egészet egy DIV-be pakolod, majd megadod neki, hogy X méretű kijelzőnél mekkora legyen a (max) szélessége.

@media only screen and (max-width: 800px) {

beagyazott_termek {

width:100%!important;

max-width:300px!important;

}

}

#4

Kedves Varga Viktor!

 

Köszönöm szépen a gyors választ és elnézést, hogy csak most reflektálok, de nem voltam gép közelében. Sajnos annyira még nem vagyok járatott a Wordpress-ben mivel idén kerültem csak kapcsolatba ezzel a remek templet-el. Igazából mellékelek két linket ahol szerintem azonnal láthatod, hogy mire gondolok. Van amikor terméket szúrok be a bejegyzésbe és van, hogy egy termék leírásánál szúrtam be ( url által ) mérettáblázatokat. Viszont ha megnézed telefonon keresztül akkor látható, hogy ahol nem írom át a méretet ott nem csinálja responsiv-ra. Természetesen a legjobb az lenne, hogy az adott kijelzőhöz igazítaná automatikusan, mint pl.: a térképet vagy a youtube videókat vagy éppen a jpg.-ket amiket beszúrok a bejegyzésbe.

Ahol átírtam a méretet ( de sajnos az a baj ezzel, hogy akkor ezen a méretet mutatja asztali gépen is értelemszerűen, tehát esztétikailag szerintem nem szép ): https://avc.hu/hadik-ott-folytattuk-ahol-abbahagytuk/

Ahol nem adtam meg saját méretet ( viszont itt telefonon kilóg a képből ) :

https://avc.hu/termek/tech-1-k-race/

Amit írtál DIV az lenne a legjobb megoldás, de én egyáltalán nem ragaszkodok az adott mérethez, hanem a kijelző méretéhez igazítsa automatikusan. Ezt a kódsort amit írtál azt a ide illesszem be?

Vezérlőpult/Megjelenítés/Testreszabás/Egyedi CSS ? Mellékelek egy képet, hogy jelenleg milyen egyedi CSS-ek vannak beírva. Ott látható az a sor is részben amit te írtál. Ha netán nem érthető amit írtam elnézést, nem vagyok annyira otthon még a Wordpress-ben. Köszönöm előre is válaszodat. Üdvözlettel: Miklós

#5

Kedves Viktor!

 

Felvittem az egyedi CSS-be amit az előző levelemben írtam amit adtál, de sajnos nem volt változás.

Mellette láthatod képen is. Nem lehet, hogy a templete gyártója valamit korlátozott?

Mivel a youtube és képek automatikusan responsive lesz bárhova is beszúrom. Termék leírása, vagy éppen bejegyzésbe. Köszönöm a választ előre is. Mellékelem a printscreen-t. Üdvözlettel: Miklós

#6

Az [embed width=“315” height=“157”] kódodat betetted a div-be ilyen módon?

<div class=“beagyazott_termek”>[embed width=“315” height=“157”]</div>

Holnap tudok konkrétabban is segíteni.

#7

Szia még nem próbáltam. De akkor amit adtál írtál Code short azt is szembe a bejegyzésbe? Ne haragudj ha hülyeség de nem tudom pontosan hova illesszem be. én a mérethez nem ragaszkodok a lényeg hogy reszponzív legyen és felvegye az adott kijelző méretét Nekem az lenne a tökéletes megoldás. Láttam és megnéztem linket amit küldtél a woocommerce különböző forráskódokat, de azok közül nem találtam olyat ami a terméket mutatnám be. Köszönöm Akkor holnap ha van időd bármikor jelezz Nagyon köszönöm szépen előre is. Szép estét kívánok.

#8

Szia,

Hát beillesztettem azt a kódsort a bejegyzésbe amit adtál. A beágyazott termék-hez a termék url-jét adtam.

De sajnos nem tudja betölteni. Vagy oda mást kellet volna írnom?

<div class=“https://avc.hu/termek/sh-17/”>[embed width=“315” height=“157”]</div>

Akkor majd holnap folytatjuk. De nagyon köszönöm a gyors és türelmes hozzáállást… :slight_smile:

Üdvözlettel: Miklós

#9

Jó reggelt!

A div-hez azt kellett pontosan megadni, amit én leírtam Neked (<div class=”beagyazott_termek”>…</div>. Ugye egyedi css-ben adtunk neki stílusokat, ezért amit ez közre fog, arra érvényesek lesznek az ott leírtak. Így most az osztálynak adtad meg az URL-t, ami nem vezet eredményre. Mindenesetre szerintem akkor kezdjünk valami könnyebbel :slight_smile:

Ha simán a bejegyzésbe beilleszted a shortcode-t, akkor ott meg fog jelenni a kívánt termék/termékkategória.
A Te esetedben, mivel egy-egy termékről beszélünk, így erre van szükséged:
[product id=“99”]

A 99-es szám helyére annak a terméknek az azonosítóját kell beírni, amelyiket szeretnéd megjeleníteni. Egy termék azonosítóját (ID) a Woocommerce->Termékek menüpont alatt akkor látod, ha
1.) felé viszed az egeret a terméknek (ekkor alul megjelenik az url-je, és ott a post= utáni számra van szükséged, vagy
2.) a termékre kattintva (azt szerkesztve) fent a böngésző címsorában a fentebb említett módon kinézed az url-ből (http://3dxv6eufwq121b0b4ahxf9o0q-wpengine.netdna-ssl.com/wp-content/uploads/2015/06/woocommerce-productId.png)

Ha reszponzív a sablonod, akkor ez a beágyazott termék is az lesz. Amennyiben több terméket akarsz megjeleníteni, akkor így néz ki ez a shortcode:
[products ids=“1, 2, 3, 4, 5”]

Ha pedig egy egész kategória termékeit akarod beszúrni, akkor ezt kell használnod:

[product_category category=“kategoria_slug”]
itt a “kategoria_slug” helyére annak a kategóriának a slug-ja kerül, amelyiket szeretnéd megjeleníteni. Ezt a termékkategóriáknál találod meg a leírás oszlop mellett.

Remélem ez alapján sikerülni fog tájékozódni, ha nem, akkor kérlek írj privátot, és az egyik oldalon szemléltetem Neked, hogy utána tudd alkalmazni.

#10

Kedves Viktor!

 

Köszönöm szépen SIKERÜLT!!! :slight_smile:

Amit megadtál shortcode-ot a termékeknél szuperül RESPONSIVE tehát így már tökéletes.

De valamiért ha több terméket szeretnék megjeleníteni akkor nem mutat semmit. Alul mellékelem a printscreen-t. Pedig létező azonosítók a termékeknél látható, ahogy mondtad.

Valamint itt a link, de ott viszont nem látható… https://avc.hu/hadik-ott-folytattuk-ahol-abbahagytuk/?preview=true

A leírás is érthető már ki is próbáltam… :slight_smile:

Egy apróságot észrevettem, hogy én 24 colos monitoron nézem valamint telefonon és monitoron a terméket amit megjelenít pixeles mivel a képek amiket feltöltöttem 800x800-as méretben vannak így jön ki a sablonok megjelenítése amit a templete használ. Viszont azt is felnagyítja így ezért lesz pixeles. Ezt is meg lehet határozni a shortcode-ban?

Viszont sajnos ha a termékeknél a mérettáblázatot beszúrom, úgy, hogy megmutatom a linket a letöltések menüpont alatt ott is megoldható, hogy responsive legyen?

pl.: https://avc.hu/termek/gamma-kb-4/

Nagyon köszönöm az eddigi segítségedet… :slight_smile:

Üdvözlettel: Miklós

#11

Örülök, hogy segíthettem!

A több termék megjelenítés szerintem a rosszul berakott idézőjelek miatt nem működött. Próbáld meg kitörölni az idézőjelet, majd saját kezűleg beírni, mert itt a fórum átalakítja valamiért.

A termékoldalon lesz pixeles a kép? Küldesz erről is nekem képernyőmentést (screenshotot)?

Illetve a táblázatot milyen megoldással hívod be?

 

#12

Szia,

 

Köszönöm az idézőjeleket átírtam és működik… :slight_smile: SZUPER

Mellékelem a linket ahol látható a nagyobb megjelenítés. Printscreent is csinálok, de nem lesz benne teljesen, mert a termék kép elfoglalja a képet.

https://avc.hu/hadik-ott-folytattuk-ahol-abbahagytuk/?preview=true

Mellékelem a képernyőmentést…

Köszönöm

#13

mindjárt mondom a megoldást

#14

.products .product .woo-cover img, .products .type-product .woo-cover img {

min-width: 30%!important;

max-width: 50%!important;

}

ezt másold be az egyedi css-hez, jónak kell lennie

szerk: ahhoz, hogy egymás mellett jelenjenek meg a termékek, így kell kiegészítened a shortcode-t:

[products ids=”1, 2, 3, 4, 5″ columns=“3”] (esetünkben három kerül egy sorba)

#15

Szia,

Beillesztettem de sajnos hibát ír. Idézőjel nincsen a kódsorban tehát nem a karakterrel van a probléma. Egyébként én minden beillesztést előtte a jegyzettömbe beillesztek, utána másolom csak az oldalra fel. Mellékelem a print screent…

Köszönöm

#16

Köszönöm a shortcode-ot is szuper lett… :slight_smile:

 

#17

nincs lezárva } jellel, azért jelez hibát

#18

Én rontottam el lemaradt egy kapcsos zárójel a végén a shortcode-nál… :slight_smile:

Beillesztettem… a méret alapján látom nem nagyítja fel, csak annyi érdekesség van, hogy

a mellette lévő rész pedig más színben van. Mellékelem a printscreent.

 

#19

Igen írtam is… :slight_smile:

Viszont a termékeknél ezáltal a megjelenítésnél mindenhol látható amit átküldtem az előző hozzászólásban. Mellékelek képet is.

#20

ez pedig azért van, mert kisebb lett a kép, nem tölti ki már a teret, és megjelenik a háttere.
az egyedi css-hez másold be ezt:

.products .product .woo-cover .woo-entry-thumb .preview-thumb, .products .type-product .woo-cover .woo-entry-thumb .preview-thumb {

background: #ffffff!important;

}