Nyílt Web Alapítvány > WordPress Magyarország > Témakör > Beágyazás RESZPONSIVITÁS

Beágyazás RESZPONSIVITÁS

Kezdőlap Fórumok Bővítmények Beágyazás RESZPONSIVITÁS

Ennek a témakörnek tartalma 27 hozzászólás, 2 résztvevő. Utolsó frissítés:  Horváth Miklós 1 hét, 4 napja telt el.

15 bejegyzés megtekintése - 1-15 / 28
  • Szerző
    Bejegyzés
  • #268201 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    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.

     

    #268223 Hozzászólás

    Varga Viktor
    Felhasználó
    • Témanyitás: 2
    • Hozzászólás: 79
    • Aktív Tag

    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

    #268224 Hozzászólás

    Varga Viktor
    Felhasználó
    • Témanyitás: 2
    • Hozzászólás: 79
    • Aktív Tag

    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;

    }

    }

    • A hozzászólás módosításra került: 2 hete, 2 napja telt el- Varga Viktor.
    #268237 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    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

    Attachments:
    You must be logged in to view attached files.
    #268239 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    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

    Attachments:
    You must be logged in to view attached files.
    #268243 Hozzászólás

    Varga Viktor
    Felhasználó
    • Témanyitás: 2
    • Hozzászólás: 79
    • Aktív Tag

    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.

    #268244 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    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.

    #268247 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    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… 🙂

    Üdvözlettel: Miklós

    #268269 Hozzászólás

    Varga Viktor
    Felhasználó
    • Témanyitás: 2
    • Hozzászólás: 79
    • Aktív Tag

    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 🙂

    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.

    #268276 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    Kedves Viktor!

     

    Köszönöm szépen SIKERÜLT!!!!!!!!!!!!!!!! 🙂

    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… 🙂

    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 800×800-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… 🙂

    Üdvözlettel: Miklós

    Attachments:
    You must be logged in to view attached files.
    #268278 Hozzászólás

    Varga Viktor
    Felhasználó
    • Témanyitás: 2
    • Hozzászólás: 79
    • Aktív Tag

    Ö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?

     

    • A hozzászólás módosításra került: 2 hete, 1 nap telt el- Varga Viktor.
    #268280 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    Szia,

     

    Köszönöm az idézőjeleket átírtam és működik… 🙂 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

    Attachments:
    You must be logged in to view attached files.
    #268285 Hozzászólás

    Varga Viktor
    Felhasználó
    • Témanyitás: 2
    • Hozzászólás: 79
    • Aktív Tag

    mindjárt mondom a megoldást

    • A hozzászólás módosításra került: 2 hete, 1 nap telt el- Varga Viktor.
    #268287 Hozzászólás

    Varga Viktor
    Felhasználó
    • Témanyitás: 2
    • Hozzászólás: 79
    • Aktív Tag

    .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)

    • A hozzászólás módosításra került: 2 hete, 1 nap telt el- Varga Viktor.
    #268289 Hozzászólás

    Horváth Miklós
    Felhasználó
    • Témanyitás: 1
    • Hozzászólás: 16
    • Kezdő

    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

    Attachments:
    You must be logged in to view attached files.
15 bejegyzés megtekintése - 1-15 / 28
Hozzászólás: Beágyazás RESZPONSIVITÁS
Saját információk:




Tovább az eszköztárra

A honlap további használatához a sütik használatát el kell fogadni. További információ

A süti beállítások ennél a honlapnál engedélyezett a legjobb felhasználói élmény érdekében. Amennyiben a beállítás változtatása nélkül kerül sor a honlap használatára, vagy az "Elfogadás" gombra történik kattintás, azzal a felhasználó elfogadja a sütik használatát.

Bezárás