Sziasztok!
Telepítettem a rendszert, majd Sablont váltottam a Mountain Creek sablonra.
Az a problémám, hogy amikor akár egy oldalba, akár egy bejegyzésbe szeretnék több képet beszúrni, akkor azok nem egymás mellett, hanem egymás alatt jelennek meg.
Mellékeltem 2 képet az egyiken látszik a jelenlegi helyzet, tahát a képek egymás alatt helyezkednek el (hiba_1), a másik képen azt jelöltem, hogy hol kellene lennie (hiba_2)
Kérlek benneteket segítsetek, mert nagyon fontos lenne és én nem jövök rá, hogy mi lehet a gond, illetve hol kell állítanom átírnom.
Előre is köszönöm!
gubtan
Szia!
Leírom, hogyan szoktam. (Mert több megoldás is van, sőt, nagyon sok.)
A legegyszerűbb megoldás -szvsz nem a legjobb - , ha beteszed egy táblázatba, a táblázatnak a keretét meg leszeded. Létezik sok “online table html generator” - így keress rá- ahol legenerálják neked a html kódot, és akkor a kép html kódját a a tábla megfelelő helyére be kell illeszteni. De a tinyMCE advanced nevű plugin tud táblákat beillesztni.
Én azonban soha nem így, hanem shortcode- al szoktam az ilyet elkészíteni. (…és sokan mások…)
1. Lépés:
A sablonon (wp-content/themes/{sablonomneve}) könyvtárában meg kell nyitni a style.css fájlt.
A végére beszúrunk 2 css osztályt:
.balra_teszem{<br />
position: relative;<br />
float: left;<br />
width: 250px;<br />
}<br />
<br />
.jobbra_teszem{<br />
position: relative;<br />
float: right;<br />
width: 250px;<br />
}
```<br />
Ezekkel fogjuk pozicionálni a tartalmat.<br />
<br />
<strong>2. lépés</strong><br />
<br />
Ha ez megvan, utána megnyitjuk a <strong>functions.php</strong> nevű fájlt (sablonunk könvvtárában van ez is), és a végére beszúrjuk ezt:<br />
add_shortcode( ‘hova’, ‘poz_shortcode’ );
function poz_shortcode($atts, $content = null){
switch($atts[‘keruljon’]) {
case “bal”:
$kimenet=’
’.$content.’
’;break;
case “jobb”:
$kimenet=’’.$content.’’;
break;
default:
$kimenet=’’;
}
$ezeket_toroljuk = array("
", “
”, “
”, “
”);return str_replace($ezeket_toroljuk, “”, $kimenet);
}
Kész!<br />
<br />
<strong>3. Lépés</strong><br />
<br />
<strong>Használata:</strong><br />
<br />
Megnyitod szerkesztésre egy post/pages-t, vagy amit akarsz, mindegy.<br />
<br />
Simán, ahogyan szoktad, beszúrsz 2 képet, egymás alá (médiatárból, ahogy kell). A szerkesztő grafikus fül legyen aktív! <strong>SEMMIKÉPP NE A HTML nézet! (Mert ugye így nem kell html kódban keresgélni, ez a shortcode egyik előnye.)</strong><br />
<br />
Tehát látjuk a két képet egymás alatt!<br />
<br />
Utána a felső kép fölé megyünk, és beírjuk:<br />
<br />
<strong>[hova keruljon="bal"]</strong><br />
<br />
{ITTA KÉPET LÁTJUK, balra lesz}<br />
<br />
<strong>[/hova]</strong><br />
<br />
Az alatta lévő képnél pedig, amit a szerkesztőben a fenti kép alatt látunk és majd jobbra, tehát mellé akarjuk tenni, oda meg így:<br />
<br />
<strong>[hova keruljon="jobb"]</strong><br />
<br />
{ITTA KÉPET LÁTJUK, jobbra kerül}<br />
<br />
<strong>[/hova]</strong><br />
<br />
*************************************************<br />
<br />
Mentünk! ez után, a szerkesztőben úgy látjuk, hogy a két kép egymás alatt van, de ha megnézzük, az alodlalunkat a böngészőben, akkor már egymás mellett lesznek!<br />
<br />
Mert a shortcode függvénnyel intézzük azt, hogy a scotcode-közötti tartalom hová kerüljön, milyen div-ek közé tegye!<br />
<br />
Természetesen lehet állítani a balra_teszem és a jobbra_ teszem css-ét, hogy hogy nálunk mekkora hely, meg arra kell figyelni, hogy a két kép méretben elférjen egymás mellett a törzsszövegben!<br />
<br />
Minden sablonban más-más css-t kap az IMG, tehát azt még nézegetni lehet, hogy tuti kiférjen, sőt, responsive sablon esetén lehet bővíteni meg media quer-vel szórakozni, a lényeg, hogy shorcode-val, közvetlenül a GRAFIKUS felületen lehet tartalmakat pozicionálni úgy, hogy a köztük lévő tartalmat egy div be tesszük, a div nek pedig css-t adunk.<br />
<br />
Persze lehetne a<strong> jobbra_teszem</strong> css-t is balra tenni: <strong>position: left;</strong> akkor is mellé kerül, de közvetlenül mellé! Így margin és padding értékekkel lehet finomítani, tisztán css-tulajdonságokkal.<br />
<br />
A shortcode-ról további információ: http://codex.wordpress.org/Shortcode_API