Cikkajánló
Még augusztusban valamikor készítettem háromféle Oldal infó szövegdobozt, amit akkor fel is tettem az oldalra, csak még nem írtam ki. Ha esetleg valaki nem tud magától készíteni az oldalára,
A legegyszerűbben úgy tudtok táblázatot készíteni akár WordPress-ben akár G-Portálon vagy olyan szolgáltatónál, ahol tartalomkezelő van, hogy a forráskódban dolgoztok és így hozzátok létre a táblázatot és írjátok meg
Sosem hittem volna, hogy elérkezik valamikor az a nap, hogy elköltöztetem a honlapomat G-Portálról. Nagyon régóta ott motoszkált az agyamban valahol hátul, hogy esetleg mi lenne, ha…, de aztán
Blog téma G-Portálra 2.0 Betűtípus kereső Teszteld oldalad felbontását URL cím értelmezése CSS kód beillesztése G-Portálra
2016. december. 29.

Sziasztok! A napokban készítettem rendelésre G-Portálos design-okat, és úgy belejöttem, hogy csak úgy, mert éppen volt időm, csináltam négy darab ingyen letölthetőt is :) Többször van, hogy mostanában úgy kéritek a rendeléseket, hogy inkább letisztultabb kinézetű legyen, így ez a négy ingyenes is olyan lett. Sztáros oldalakat készítettem, de értelemszerűen a fejléc cserélhető. Akikről készültek a kinézetek: Celine Dion • Demi Lovato • Jennifer Lawrence • Selena Gomez. És miközben csináltam a design-okat, rájöttem, hogy egy tök alap CSS kódot még meg sem osztottam veletek. Ez a CSS kód arra való, hogy a fejlécre tudjátok tenni a modult. Mármint, hogy feljebb csússzon rá a fejlécre. Egyetlen apró kód az egész. Nem kell semmit állítgatni az oldalon, csak a többi kód közé ezt a sor kódot kell betenni és máris a fejlécen lesz a tartalmi rész

 

A kód, amivel a fejlécre helyezhető a tartalom

 

.sitemain {
margin-top: -80px !important;
}

 

A kinézeteket pedig itt tudjátok letölteni. Ezt az aloldalt is végre átalakítottam, mert az előző borzalmas volt már. Így átláthatóbbak lettek a letölthető kinézetek is :)
G-Portál – G-Portálos teljes kinézetek

 

  
  
Kattintsatok a képekre a nagy mérethez!

lindadesign Hozzászólások
1 086 megtekintés

Alapértelmezetten általában ezt a kódot használjátok a főoldali bejegyzéseknél, ha ki van írva a cikkíró neve: <?php the_author(); ?>

 

Ez a kód lett kiegészítve úgy, hogy egyrészt a név linkelhető, másrészt azért linkelhető a név, mert ezzel a kóddal azt lehet elérni, hogy minden cikkíró cikkét külön meg lehet nézni. Ki mit írt és mennyi cikket. Ez akkor jó, ha pl. több szerkesztője van az oldalnak. Többen írnak cikkeket. Például engem jobban érdekelnek XY cikkei, mert tartalmasabbak, mint AB cikkei, akkor az XY nevére kattintva csak az ő cikkei jelennek meg az oldalon. Nem nagy szám, de szerintem hasznos kis kód.

 

Az alapértelmezett kódot kell kicserélni erre a kódra:

 

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>

lindadesign Hozzászólások
424 megtekintés

A Bővebben link átnevezését már elég sokan tudjátok, nem is ez a legfontosabb része ennek a cikknek. Inkább arról van szó, ahogy az ikont használjátok előtte. Mindenhol úgy látom, hogy teljesen összeér az ikon és a link és az úgy annyira nem szép. Itt egy kép, mire gondolok:

 

 

Szóval ezen lehet a CSS kódban segíteni. Hogy ne érjen így össze az ikon és a link. Biztosan több módja van, de nekem az alábbi vált be a legjobban. Ez a kód a teljes kódot tartalmazza. Az átnevezést és az ikont is a link előtt. A kódban kiemeltem azt a részt, amivel a szünetet tettem a link és az ikon közé. Simán csak a content résznél több perjelet tettem a kódba: content:”\f090 \ \ \Teljes hír”;

 

Plusz ugyanennél a résznél azt is be tudjátok állítani, hogy a linknek milyen legyen a betűtípusa. Itt akkor most kettő nevet kell adni. Az egyik a FontAwesome betűtípus, a másik meg pl. Arial. Így az ikon felveszi a FontAwesome betűtípust, míg a link pedig az Arialt: font-family: Arial, FontAwesome;

 

 

/* bővebben */
.blogmorelink {
background: #006A90 !important;
border: 0px;
padding: 10px 0 10px 0 !important;
margin-top: 12px !important;
text-align: center !important;
margin-left: 280px !important;
margin-right: 280px !important;
}
.blogmorelink a:link, .blogmorelink a:visited {
color: #ffffff !important;
font-weight: normal;
font-style: normal !important;
font-size: 13px !important;
font-family: Calibri;
background: transparent !important;
}
.blogmorelink a {
visibility: hidden;
}
.blogmorelink a:before {
content:"\f090 \ \ \Teljes hír";
font-family: 'Merriweather', serif, FontAwesome;
font-size: 12px !important;
margin-left: 60px !important;
white-space: pre;
visibility: visible;
}
.blogmorelink a:hover {
text-decoration: underline;
}

lindadesign Hozzászólások
571 megtekintés

Mielőtt megörülnétek, nem, nem lett a G-Portálon ilyen funkció. Ezt magunknak kell elkészíteni. Viszont, mivel sok mindenki használja a szélső sávban a címkéket felsorolás jellegűen, így készítettem egy tök egyszerű kódot, amivel azért pofásabbá lehet tenni a címkéket a G-Portálon is a szélső sávban. Ehhez először is kell egy modul az oldalsávban, ahova fel kell vinni a címkéket és be kell linkelni őket. Ha sok címkét használtok, nos hát, akkor csak a legfontosabbakat tegyétek ki szélre.

 

A kódolás a modulban így legyen: írjátok meg a cikkeket, linkeljétek be őket. Simán csak egy szóközzel legyenek a címkék elválasztva egymástól. Fent a vastag, dőlt, aláhúzott stílus mellett ott van az áthúzás is. Azzal húzogassátok ki a szavakat. Így fog kinézni a modulban:

 

 

A forráskódja pedig ilyen lesz

 

<strike><a href=”http://24.hu” target=”_blank”>24.hu</a></strike> <strike><a href=”http://gilmores.atw.hu” target=”_blank”>gilmores.atw.hu</a></strike> <strike><a href=”http://cosmopolitan.hu” target=”_blank”>cosmopolitan.hu</a></strike> <strike><a href=”http://hotdog.hu” target=”_blank”>hotdog.hu</a></strike> <strike><a href=”http://libri.hu” target=”_blank”>libri.hu</a></strike> <strike><a href=”http://port.hu” target=”_blank”>port.hu</a></strike> <strike><a href=”https://hu.wikipedia.org/wiki/Kezd%C5%91lap” target=”_blank”>wikipedia.org</a></strike> <strike><a href=”http://www.imdb.com/” target=”_blank”>imdb.com</a></strike>

 

És már csak a CSS kód kell, hogy elmentés után így nézhessen ki

 

 

.column_side strike{
text-decoration: none !important;
width: 100%;
line-height: 30px;
display: inline;
}
.column_side strike a:link, .column_side strike a:visited {
padding: 5px 10px 5px 10px;
color: #ffffff !important;
background: #006A90;
}
.column_side strike a:hover {
background: #AE2010;
text-decoration: none;
}

lindadesign Hozzászólások
629 megtekintés

2016. december. 25.

Több kérdést kaptam már arról, hogy meg lehet-e csinálni azt, hogy a címkék vesszővel vagy ponttal vagy valamivel el legyenek választva egymástól. Ehhez a G-Portáltól kértem segítséget, mert ha valaki sosem tanulta a kódolást, akkor ugye nem tudhat mindent. És én, amit tudok azt magamtól tudom, nem tanította senki, tehát ebben segítséget kellett kérnem. Kaptam is egy alap kódot, amit én már kicsit át is variáltam, hogy “majdnem” tökéletes lehessen.

 

 

Csak egy kis CSS-re van hozzá szükség és semmi másra. Az elválasztáshoz itt is a FontAwesome ikonok között választhattok egyet, ha a pont nem felelne meg.

 

/* címkék */
.blogtags {
font-size: 0px!important;
text-align: left;
margin: -45px 0px 0px 30px!important;
position: absolute;
width: 750px;
background: transparent;
padding: 10px 0 7px 10px;
}
.blogtags a:after { /* itt adjátok meg, hogy mi válassza el a címkéket egymástól */
content: "\f111";
font-size: 6px;
font-family: FontAwesome;
margin-left: 7px;
margin-top: 0px;
position: absolute;
}
.blogtags a:last-child:after {
content: "";
margin: 0;
}
.blogtags:before { /* ikon a címkék előtt */
font-size: 14px;
font-weight: normal !important;
font-style: normal !important;
color: #ffffff;
background: #D28E28;
padding: 10px;
font-family: FontAwesome;
content: "\f02c";
margin-left: -40px !important;
margin-top: -10px;
position: absolute;
}
.blogtags a:link, .blogtags a:visited {
font-size: 13px;
font-family: 'Raleway', sans-serif;
font-weight: normal;
font-style: normal !important;
color: #3B3B3B !important;
padding: 4px;
margin-right: 10px;
}
.blogtags a:hover {
color: #ffffff !important;
background: #AE2010;
}

lindadesign Hozzászólások
472 megtekintés

Egyből az előnézeti képpel kezdek, hogy értsétek miről is van szó. Az a lényeg, hogy ezekkel a kódokkal azt lehet elérni a főoldalon, hogy ugyanúgy egymás alatt jelennek meg a cikkek, viszont csak egy része. A teljes cikket pedig akkor lehet elolvasni, ha valaki rákattint a Tovább linkre. Nem sokan használtok rövid tartalmat az oldalatokon, sem itt sem G-Portálon. De én azt tanácsolom, hogy kezdjétek el használni a rövid tartalmakat. Sokkal szebb oldalakat lehet így készíteni és maga az oldal is hamarabb betölt, ha valaki ellátogat hozzátok. Plusz így a főoldalon sokkal több cikket is meg tudtok jeleníteni egyszerre, nem csak 3-6 darabot. Persze ezt mindenki maga dönti el, én csak javasoltam.

 

Ajánlatos pl. a Notepad program használata tanulás közben. Oda bemásolod a kódot és mindent már is szebbnek lehet látni benne és persze sokkal áttekinthetőbb az egész. Innen le tudod tölteni: letöltöm

 


Teljes méretért kattintsatok a képre!

 

A kódokat a home.php fájlba kell illeszteni. Ha nincs home.php fájl, akkor hozzatok létre egyet és oda tegyétek majd bele. Az index.php fájlba is tehető a kód, mert akinek nincsen a sablonjában home.php fájl, annak automatikusan az index.php fog betöltődni. Ez egy úgynevezett “segéd fájl”, amiről itt már bővebben is írtam.

 

Először a kiemelt kép kódját cseréljétek le a function.php fájlban. A kiemelt kép úgy van megcsinálva, hogy bármekkora képet fel lehet tölteni. A functions.php fájlban lévő kód pedig pontosan levágja akkorára, mint a mintaképeken is látható. Ha pedig később újra kell méretezni a kiemelt képeket, mert másik design-t használtok majd, akkor a functions.php fájlban át kell írni a méretezést, utána pedig ezzel a bővítménnyel a régi kiemelt képeket frissíteni kell, hogy felvehesse az új képméretet :)

 

// kiemelt kép engedélyezése
if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
}
if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'new-size', 700, 300, true );
add_image_size( 'home', 350, 260, true );
}
add_filter('image_size_names_choose', 'my_image_sizes');
function my_image_sizes($sizes) {
$addsizes = array(
"new-size" => __( "New Size"),
"home" => __( "New Size")
);
$newsizes = array_merge($sizes, $addsizes);
return $newsizes;
}

 

Ezzel pedig azt állítjuk be, hogy a szövegrészlet után azok az idegesítő kis pontocskák ne jelenjenek meg egyáltalán, ami azt jelzi alapból, hogy a szöveg folytatódik. Mi a cikk alá egy tovább buttont fogunk tenni.
A kód forrása.

 

// tovább karakter törlése //
function custom_excerpt_more( $more ) {
return ' ';
}
add_filter( 'excerpt_more', 'custom_excerpt_more' );

 

A functions.php fájlt mentsük el. Ez után a home.php fájlban dolgozunk. De ha ti maradtok inkább az index.php fájlnál, akkor abban dolgozzatok. Itt az én home.php fájlom tartalma, ha inkább az egészet simán csak kimásolnátok. Ha nem másolni fogtok, akkor arra figyeljetek, hogy minden más is legyen benne a home.php fájlban, ami behívja a fejlécet, oldalsávot és láblécet is! És persze a lapozótokat se felejtsétek el! Ha az én kódomat használjátok, akkor se felejtsétek a lapozó részben átírni a kódot a ti lapozótokra, mert én nem bővítménnyel lapozok, így kicsit más a kódom.

 

Részletesebben a home.php fájlban lévő kódokról

 

Ez a rész alapértelmezetten benne kell, hogy legyen. Behívja a fejlécet, oldalsávot, főmodult és a tartalmát is.

 

<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-<?php the_ID(); ?>">

 

A következő kód a rövidített bejegyzés kódja. Benne van a kiemelt kép, cikk írója, dátum, tovább gomb, a hír rövid kivonata, stb. Ezt a CSS-ben lehet állítani, hogy hogyan is nézzen ki. A kódban van magyarázat is. Használjátok a FontAwesome kódját a WordPress-ben, ha még nem alkalmazzátok, mert itt a kódban úgy van megcsinálva, hogy az ikonok is láthatóak. Ahogy a képen is látjátok.

 

<!--Bejegyzés címe -->
<div class="blogcim"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<!--Bejegyzés bélyegképe -> thumbnail -> a zárójelben lévő home hivatkozik a function.php fájlban lévő kiemelt kép méretére -->
<div class="kiemelt-kep"><?php the_post_thumbnail( 'home' ); ?></div>
<!--dátum cikkíró hozzászólás linkek -->
<div class="bloginfo"><i class="fa fa-calendar" aria-hidden="true"></i> <?php the_time('Y. m. d.') ?> &nbsp; &nbsp;<i class="fa fa-user-circle" aria-hidden="true"></i> &nbsp;<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a> &nbsp; &nbsp;<i class="fa fa-comments-o" aria-hidden="true"></i> <?php comments_popup_link('0', '1', '%'); ?> Hozzászólás</div>
<!--Bejegyzés rövid kivonata -->
<div class="blogtartalom">
<div class="<?php echo $span_excerpt;?>">
<?php echo excerpt(65); ?>
<!--Tovább gomb -->
<div class="tovabb"><a href="<?php the_permalink(); ?>">Tovább</a></div>
</div>
</div>
</div>
<p>&nbsp;</p>

 

Ezt a két kódot kiemelném. Az egyik a cikk írója kódja. Én egy hosszabb kódot illesztettem be, ami arra jó pl., hogy ha van olyan oldal, ahol több a szerkesztő és többen írnak cikkeket, akkor ezzel a kóddal külön lehet linkelni, hogy melyiket ki írta. Ha rákattintotok a cikk írója nevére, akkor kihozza azokat a cikkeket, amiket csak ő írt meg. Ezért ez a kód hosszabb a hagyományosnál.

 

<a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ), get_the_author_meta( 'user_nicename' ) ); ?>"><?php the_author(); ?></a>

 

A másik kód pedig a hozzászólás linkje. Itt cserélhetitek a kódot arra a linkre, amit ti használtok a sablonotokban.

 

<?php comments_popup_link('0', '1', '%'); ?> Hozzászólás

 

Ami még kiemelendő, az ez a része a kódnak. Itt lehet azt beállítani, hogy mennyi karakter jelenjen meg a rövidített bejegyzésben. Kiemeltem a számot, hol kell átírni.

 

<!--Bejegyzés rövid kivonata -->
<div class="blogtartalom">
<div class="<?php echo $span_excerpt;?>">
<?php echo excerpt(65); ?>
<!--Tovább gomb -->
<div class="tovabb"><a href="<?php the_permalink(); ?>">Tovább</a></div>
</div>
</div>

 

Ez pedig a home.php vagy index.php vége. Jelen esetben a lapozó van benne és a lábléc. Meg az egész lezáró DIV-je.

 

</div>
<p>&nbsp;</p>
<?php endwhile; else: ?>
<?php endif; ?>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="lapozo">
<?php wp_pagination(); ?>
</div>
<p>&nbsp;</p>
<?php get_footer(); ?>

 

És az egészhez tartozó CSS kód
Itt azt meg kell jegyeznem, hogy ez a teljes kód az én minta oldalam szélességéhez van igazítva (#content), ami 720px széles. Így ha nektek keskenyebb vagy szélesebb a főmodul (#content), akkor elsőre lesznek elcsúszások a bejegyzésekben. Ez elkerülhetetlen. A CSS kódban kiemeltem azokat az adatokat, amivel be tudjátok állítani, hogy nálatok is tökéletes lehessen a két oszlop. A kiemelt képek méretét a function.php-ban is úgy kell megadni, hogy az beleférjen a főmodulotokba. Erre példa: Nekem 720 pixel széles a főmodul. A kis kiemelt képek szélességét 350px-re állítottam be. Így még marad 370 pixel szélességünk. Ezért a blogtartalmat 350 pixel szélesre állítottam, mivel ehhez hozzájön még 10-10 pixel üres hely a két szélére. Maga a cím sáv is azért lett 700 pixel széles, mert 10-10 pixelt ott is rá kell számolni a két szélére. És így jön ki a 720 pixel: 350px a kiemelt kép + 350px a rövid tartalom rész + kétszer 10px a tartalom két szélén az üres rész.

 

A CSS kódot pedig a style.css fájlba kell bemásolni. Minden class kódot magyarul írtam, szóval elvileg simán ki lehet benne igazodni. A kinézetet úgy is megcsinálhatjátok, hogy a kiemelt kép van bal oldalon és a cikk a jobbon. Ez már részletkérdés ;)

 

/* főoldal modulja */
.kiemelt-kep {
float: right;
width: 350px;
height: 260px;
}
.blogcim {
background: #00899B;
padding: 10px;
width: 700px;
text-align: center;
}
.blogcim a {
color: #ffffff !important;
}
.bloginfo {
font-size: 12px;
background: #D6D6D6;
text-align: center;
color: #000000;
padding: 5px;
width: 360px;
float: left;
}
.bloginfo a {
font-size: 12px;
color: #FF703E;
}
.bloginfo .fa { /* az ikonok kinézete */
font-size: 12px;
color: #000000 !important;
font-style: normal !important;
font-weight: normal !important;
}
.blogtartalom {
float: left;
background: #ffffff;
text-align: justify;
color: #000000;
padding: 10px 10px 0 10px;
height: 224px;
width: 350px;
}

lindadesign Hozzászólások
467 megtekintés

2016. november. 27.

Megrendezésre kerül A tél oldala honlapverseny itt az oldalon. Rengeteg kredit és nyeremény vár rád és az oldaladra :) Összes kredit nyeremény ismét 2.000 kredit. Nem csak a három dobogós nyer. Rajtuk kívül még négy oldal és tulajdonosa lesz még szerencsés, akik kreditben részesülnek. Megéri benevezni. A nevezési határidő: december 31., szóval van időd átgondolni, hogy szeretnél-e részt venni eme gazdag versenyen. A kreditek mellett gravírozott tollat, érmet érembetéttel és teljes kinézetet is nyerhettek. Hajrá, mindenki nevezzen ám :) A lenti táblácskát kell kitenni az oldaladra linkelve. A verseny részletei ezen a linken vannak: Honlapverseny 2016

 

lindadesign Hozzászólások
688 megtekintés

2016. november. 01.

Felkerültek a galériába a Portfólió albuma a nagyjából pár hónapja rendelt kinézetek. Nem tudom, hogy mi történt főleg most ősszel, mert magamhoz képest elég sok rendelés összegyűlt. Főleg azért csodálkozom, mert nem is reklámozom a dolgot. Persze egyáltalán nem baj, ha rendeltek, mert szeretek ezzel foglalkozni :) Csak meglepett a dolog. Van olyan, aki már nem használja a kinézetet, akad olyan is, akiét még nem kódoltam be, de folyamatban van, és van ahol meg is lehet élőben nézni a kinézeteket, mert ez itt most a reklám helye ;)

 

 

Galéria – Portfólió

 

lindadesign Hozzászólások
772 megtekintés

2016. november. 01.

Leírom, hogy én hogyan szoktam telepíteni és használni egy WordPress témát. Azért írom le, mert meglepő, de egy csomó kérdést kapok ezzel kapcsolatban. Az is igaz, hogy ha valami valakinek egyértelmű, az nem jelenti azt, hogy a másiknak is az. Tudjátok, ha a hal nem tud fára mászni, nem a hal a hülye, csak nem tanították meg neki ;) Szóval nekem egyértelmű egy sablon használata, de lehet hogy éppen neked nem az, így hát itt most ezt megtanulhatjátok. Meg kell jegyeznem, hogy ezt ÉN szoktam így, és biztos van olyan emberke, akik ezt máshogy oldják meg, mert nem ez az egyetlen megoldás erre.

 

Ha megvan a téma, amit használni szeretnétek, az általában be van csomagolva egy .rar vagy egy .zip fájlba.

 

 

Kivéve, ha a saját sablonotokat használjátok. De ha saját sablont használtok, akkor feltételezem, hogy a sablon telepítése is megy már ;)

 

Tehát a becsomagolt fájl először is ki kell bontani a számítógépen. Úgy legyen kibontva, hogy legyen egy mappa a sablon nevével és azon belül pedig már a fájlok és mappák. Például: lindadesign-11/images mappa és a .php fájlok, stb.

 

 

Ezt a mappát a fájlokkal együtt fel kell tölteni a tárhelyetekre Total Commanderrel. Vagyis csatlakozzatok a tárhelyetekhez Total Commanderrel. A Total Commander egyik oldalán legyen a tárhely, a másik oldalán pedig ott legyetek a számítógépen belül, ahol a sablon található.

 

 

A tárhelyen keresd a themes mappát itt: public_html/wp-content/themes

 

 

Látjátok, hogy már vannak sablonok a mappában. Ide másoljátok fel az új sablont, amit használni fogtok. Másolás után jelentkezzetek be a böngészőben az oldalatokon a WordPress-be. oldaladneve.com/wp-admin. A bal oldali menüből válasszátok ki: Megjelenés/Sablonok

 

 

Itt látjátok az összes eddigi sablont. Vigyétek rá az egeret arra, amit használni szeretnétek és kapcsoljátok be.

 

 

A feltelepítése az ennyi. Viszont azért célszerű ezt így csinálni, mert ha módosítani akartok benne, pl. a CSS kódban, vagy a header.php fájlban, vagy a sidebar.php fájlban, amikben talán az ember a legtöbbet módosít, azt javaslom, hogy mindig a számítógépen lévő fájlt nyissátok meg, módosítsátok, mentsétek el. Ez után pedig a módosított fájlt töltsétek fel Total Commanderrel a megfelelő téma mappájába.

 

Mert ha élesben az oldalon módosítgatjátok ezeket a fájlokat könnyen lehet, hogy valamit elrontotok és hirtelen a nagy idegességben, mikor meglátjátok, hogy az oldalon valami nem stimmel, lehet, hogy nem sikerül egyből kijavítani a kódot vagy egyáltalán nem találjátok meg a hibát.

 

Ezért javaslom a NotePad használatát. Abban dolgozzatok, ha módosítotok valamit a WP sablonban. Először is színesben látjátok a kódokat, másodszor ha egy kód hibás, akkor a NotePad azt úgy jelzi általában, hogy az adott kód elszíneződik, harmadjára pedig, ha az elmentett módosított fájlt felülírjátok és látjátok, hogy valami nem lett az igazi, a NotePadban van lehetőség a visszalépésre és a még hibátlan kódot újra felülírni. Persze, ha nem zárjátok be előtte a programot, mert akkor már nincsen rá lehetőség. És ráadásul a hibás kód is könnyebben megtalálható benne.

 

Ha a WordPress-en belül a Megjelenés/Szerkesztőben dolgoztok és ott valamit elmentetek, akkor nincs lehetőség arra, hogy azt visszavonjátok. Szóval ez csak egy javaslat, hogy aki eddig nem így csinálta, az most már így kezelje a sablonjait.

lindadesign Hozzászólások
515 megtekintés

Most egy olyan leírást hoztam a Coppermine galériához, ami szerintem csúcs szuper. Egy valaki kérdezte ezt tőlem, de először nem nagyon értettem mit szeretne, aztán mutatott egy ilyen külföldi galériát, ahol Youtube videók voltak fent a galériában. Utána néztem és mivel egy nagyon jó dolognak tartom, így gondoltam megosztom ezt veletek is. Már csak azért is, mert olyan kérdés már többször felmerült, hogy lehetne normálisan videót beilleszteni vagy feltölteni egy Coppermine galériába. Hát így :) Első olvasásra lehet kicsit bonyolultnak tűnhet, de igazából pont olyan egyszerű ez, mintha csak egy képet akarnátok feltölteni egy albumba. Szerintem ez egy nagyon jó dolog, hogy a Coppermine galériába ilyet is lehet. Sajnos a Coppermine galéria bővítményei nem olyan elterjedtek, mint pl. a WordPress-es bővítmények, pedig a CPG-hez is van egy pár jó plugin.

 

Például ez így egy csúcs szuper bővítmény, ami pl. akkor ajánlatos, ha feltöltötök egy képet a galériába, ami nem igazán jó minőségű és később pedig ugyanez a kép megjelenik jó minőségben. A többség azt csinálja ilyenkor, hogy mind a kettő képet feltölti, pedig nem kell. Ezzel a pluginnal a rossz minőségűt felül lehet írni a jó minőségűre például. Ezt már régebben írtam meg, most csak ajánlom ;) Képek felülírása

 

Az én példa videóm a galériában itt megtekinthető: Videó megnézése

 

Kettő darab Coppermine pluginra lesz ehhez szükségünk. Először mind a kettő bővítményt töltsétek le a gépetekre innen:

 

 

A letöltött fájlokat ki kell bontani. Úgy legyenek kibontva, hogy legyen egy mappa és azon belül pedig a fájlok. A nevük is maradjon meg.

 

 

Total Commanderrel kapcsolódjatok a tárhelyetekhez és menjetek bele a gallery mappába. Vagy galeria, vagy kepek, amelyik mappában nektek a galériátok van. Azon belül pedig a plugins mappába menjetek bele. Látjátok, hogy már van benne pár plugin, amik alapértelmezetten benne is voltak. Ide másoljátok fel a két kibontott bővítmény mappáját.

 

 

Ez után a galériátokban az admin menüben keressétek ezt és kattintsatok is rá:

 

 

A pluginok között ezt a kettőt keressétek:

 

 

 

Kattintsatok a sárga dobozra zöld pipával, amivel fel fogjátok telepíteni a bővítményeket. Ezt mind a kettő pluginnal csináljátok meg. Ez után látható, hogy a pluginok bekerültek a feltelepítettek közé.

 

 

A Remote Videos pluginnál az Extrák részben kattintsatok a Remote Videos beállítások-ra

 

 

Itt be fogjuk állítani, hogy milyen kiterjesztéseket fogadjon még el a galéria az alapértelmezettek közül. Ha kész mentsétek el a beállításokat.

 

 

Most elkészítjük a videó fájlját, amit majd fel kell tölteni a galériába. Nyissatok meg egy jegyzettömböt. Ide másoljátok bele a videó URL címét. Csak azt!

 

 

A jegyzettömb mentése pedig így fog történni. Mentésnél a jegyzettömb fájljára ügyelni kell! Ha youtube videót illesztetek be, akkor .youtube kell, hogy legyen a kiterjesztése. Nem .txt vagy .jpg, vagy.png vagy .rtf hanem .youtube. Ezt a kiterjesztést beállítottuk már a bővítménynél, hogy tudja kezelni a galéria. A teljes fájl neve valahogy így néz ki gilmore_girls.youtube

 


mindent pont így állítsatok be, mert különben nem lesz jó

 

Ahogy kell, az albumban létre kell hozni a videóknak kategóriát és albumot is, ahol majd meg fog jelenni a videó. Ezt hozzátok létre. És most ugyan úgy FTP-n fel kell tölteni a jegyzettömböt a kiválasztott albumjába. Vagy a galérián keresztül feltölteni. Attól függ, hogy ezt ti hogyan szoktátok a képekkel. Szóval ezt a jegyzettömb fájlt most ugyanúgy kezeljétek, mintha kép lenne és töltsétek fel. Ha FTP-n töltitek, akkor így kell a feltöltött fájlnak mutatnia:

 

 

Ha már bekerült a videó az albumba és rámentek akkor egy videó logós “képet” láttok egyelőre. Kettő plugin lett feltéve. Az egyik arra való, hogy be tudjuk ágyazni a videókat. A másik pedig arra, hogy rendes miniatűr képek legyenek a videó logó helyén.

 

 

Kattintsatok a videóra, hogy megjelenjen a köztes kép. Itt lejjebb a videó alatt amit kékkel kiemeltem, arra kattintsatok. Chustom thumbnail – azaz kiválasztunk egy képet a számítógépről, ami a kis képe lesz a videónak.

 

 

Fel kell tölteni egy képet a Tallózás-ra kattintva. Nem kell kipipálni az alatta lévő részt, mivel a mi köztes képünk már a videó. Katt az Upload feliratra és kész is.

 

 

Most ha újra megnézitek a kis képet az albumban, már az lett az előnézeti képe.

 

 

 

lindadesign Hozzászólások
569 megtekintés

2016. október. 08.

Sziasztok :) Akadt némi időm így készítettem egy teljesen egyszerű G-Portálos kinézetet, amit lehet blogra vagy rajongói oldalra is simán használni. Semmi extra szolgáltatás nincsen a témában. Egyszerű szürke árnyalatos kinézet. Természetesen módosítható a CSS kód, így nyugodtan át lehet színezni, ha netán túl egyszerűre sikeredett. Az előnézeti képet a Tovább mögött tudjátok megnézni és az ott lévő link el is vezet a témához, ha le is töltenétek ;)

 


megnézem // letöltöm

 
A régebbi témák itt találhatóak meg: G-Portál – G-Portálos teljes kinézetek

lindadesign Hozzászólások
859 megtekintés