WordPress blog készítés - weboldal készítés - honlapkészítés » Megjelenítés

Facebook fanok száma

Fridrik Béla — Mon, 09 Jan 2012 04:31:39 +0000

Nem kell mindig a Facebook developer oldalra lépnünk, ahhoz, hogy adatokat jelenítsünk meg weboldalunk. Amennyiben csak a kedvelők számára van szükségünk, akkor egyszerűen “megszerezhetjük” ezen adatot. Ahol meg szeretnénk jeleníteni az adott adatot, oda az alábbi kódot kell illeszteni:

page->fan_count;
	echo $fans;
?>

Kimenetünk egy egyszerű szám lesz, amely azt takarja, hogy az adott fan oldalunkat hányan kedvelünk. A FAN ODLAL ID helyére természetesen az adott fan oldalunk számát kell beilleszteni.

Böngésző body class

Fridrik Béla — Fri, 06 Jan 2012 04:27:09 +0000

Elsőre kicsit furcsának látszódhat a cím, de hamarosan fény derül a lényegre. Amikor WordPress weboldalt készítek ügyfeleimnek, az egyik nagyon fontos szempont, hogy minden böngésző alatt megfelelő böngészési élményt nyújtson az adott weboldal, tehát böngészőfüggetlen legyen. Azonban a tapasztalataim azt mutatják, hogy nem csak böngésző típusokban kell manapság gondolkozni, hanem már operációs rendszerekben is. Napokban futottam bele ugyanis abba a problémába, hogy azonos verziójú Firefox alatt eltérést mutatott egy Mac illetve egy Windows is. Hogy ezt a kicsiny eltérést, amely a weboldal mutatott, hogy kiküszöböljem legalább egy CSS osztályra volt szükségem, amelyet a body tag-re tettem.
Az alábbi kóddal meghatározhatjuk azt, amire éppen szükségünk van:

function mv_browser_body_class($classes) {
		global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
		if($is_lynx) $classes[] = 'lynx';
		elseif($is_gecko) $classes[] = 'gecko';
		elseif($is_opera) $classes[] = 'opera';
		elseif($is_NS4) $classes[] = 'ns4';
		elseif($is_safari) $classes[] = 'safari';
		elseif($is_chrome) $classes[] = 'chrome';
		elseif($is_IE) {
			$classes[] = 'ie';
			if(preg_match('/MSIE ([0-9]+)([a-zA-Z0-9.]+)/', $_SERVER['HTTP_USER_AGENT'], $browser_version))
			$classes[] = 'ie'.$browser_version[1];
		} else $classes[] = 'unknown';
		if($is_iphone) $classes[] = 'iphone';
		if ( stristr( $_SERVER['HTTP_USER_AGENT'],"mac") ) {
			 $classes[] = 'osx';
		   } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"linux") ) {
  			 $classes[] = 'linux';
		   } elseif ( stristr( $_SERVER['HTTP_USER_AGENT'],"windows") ) {
			 $classes[] = 'windows';
		   }
		return $classes;
	}
	add_filter('body_class','mv_browser_body_class');

A sablon header.php fájl body részét, pedig az alábbi formában kell hogy módosítsuk.

Így már apróbb simításokat is el tudok végezni operációs rendszerre szűrve is, hiszen Firefox esetén osztálynak megkapom, hogy osx illetve gecko.

Bejegyzésünk címének formázása

Fridrik Béla — Tue, 03 Jan 2012 04:51:14 +0000

Bejegyzésünk szövegét kedvünkre tudjuk formázni a vizuális szerkesztő segítségével. Azonban lehetnek olyan eset is, amikor a bejegyzés, oldal címét szeretnénk formázni. Tegyük fel, hogy legyen az egyik szó dőlt vagy félkövér, vagy esetleg más színű vagy bármelyik kombinációja. Vizuális szerkesztőt használhatunk a bejegyzésünk címéhez formázásához is, mindössze egy kis funkciót kell gyártani hozzá.

function tinymce_title_js(){ ?>




A fenti kódot a WordPress sablon functions.php fájljába kell illeszteni és máris vizuális szerkesztőnk lesz a címnél is.

Böngésző frissítés figyelmeztetés kikapcsolása

Fridrik Béla — Wed, 28 Dec 2011 04:02:10 +0000

WordPress szerencsére követi 100%-ban a webes trendeket, ez az egyik oka, annak, hogy ennyire kedvelem. Ezzel a trendkövetéssel együtt jár az is, hogy az embereket megpróbálják arra bízhatni, ha régi a böngészőjük frissítsék azt. Ha nézett már valaki régebbi böngészővel egy WordPress admint, akkor minden bizonnyal egy szép nagy sárga figyelmeztetés fogadja, hogy böngészője elavult. Azonban engem sokszor idegesít ez a dolog, hiszen régebbi Firefox böngészőkre is szoktam optimalizálni az oldalt, valamint ugyebár ott van IE7 és társai.
Az alábbi kódot, ha a sablon functions.php fájljába másoljuk, akkor ez a figyelmeztetés megszűnik.

function disable_browser_upgrade_warning() {
    remove_meta_box( 'dashboard_browser_nag', 'dashboard', 'normal' );
}
add_action( 'wp_dashboard_setup', 'disable_browser_upgrade_warning' );

Most frissített bejegyzések

Fridrik Béla — Tue, 27 Dec 2011 04:04:20 +0000

Szó volt már arról a blogban, hogy jelenítünk meg hasonló bejegyzéseket, új bejegyzéseket. Egy portál esetén azonban fontos lehet az is, hogy mikor frissült egy adott hír. Így valóban a legfrissebb információkat tudjuk adni olvasóinak. WordPress szerencsére az adatbázisban nem csak a létrehozás időpontját tárolja, hanem azt is, hogy mikor frissült utoljára az adott bejegyzés. Ez nekünk éppen elég támpont ahhoz, hogy kódot faragjunk belőle.

get_results("SELECT ID, post_title FROM $wpdb->posts WHERE post_status = 'publish' AND post_modified_gmt < '$today' ORDER BY post_modified_gmt DESC LIMIT $howMany")):
?>
Most frissült bejegyzések

post_title == '') $post->post_title = sprintf(__('Közvetlen link: #%s'), $post->ID);
     echo "";
     the_title();
     echo '';
}
?>

A WordPress sablonunk, functions.php fájljába kell illeszteni a kódot. Látható amit említettem, hogy az adatbázisból a publikált bejegyezéseknél megkeressük a post_modified_gmt-t és azok alapján listázzuk a most frissült bejegyzéseket. Azokból is az első 5 darabot.

Átirányítás bejegyzés létrehozása után

Fridrik Béla — Mon, 26 Dec 2011 04:51:04 +0000

Kedvenc tartalomkezelő rendszerünkben, amikor egy bejegyzést hozunk létre, a közzététel gombra kattintva ugyanott maradunk az admin felületen. Ahhoz, hogy megnézzük, mit is alkottunk élesbe, rá kell még pluszban kattintani a bejegyzés megtekintése gombra. Sablonjaim, mindig úgy alakítom, hogy ügyfeleim igényeit 100%-ig lefedje. Egyik ilyen igény volt az is, hogy a bejegyzés létrehozását követően, az adott bejegyzés irányítson minket a rendszer és ne az admin felületen maradjunk.

add_filter('redirect_post_location', 'redirect_to_post_on_publish_or_save');
function redirect_to_post_on_publish_or_save($location){
    if (isset($_POST['save']) || isset($_POST['publish'])) {
        if (preg_match("/post=([0-9]*)/", $location, $match)) {
            $pl = get_permalink($match[1]);
            if ($pl) {
                wp_redirect($pl);
            }
        }
    }
}

A kódot a WordPress sablonunk functions.php fájljába kell elhelyezni.

Összes osztály törlése a wp_nav_menu-ből

Fridrik Béla — Sun, 25 Dec 2011 04:37:00 +0000

Szerencsére a WordPress-nek már jó ideje van egy kiváló menükezelője és véget ért az az időszak, amikor az oldalak és kategóriák listázása fejfájást okozott sok ember számára. Mivel a WordPress számos lehetőséget ad mindenféle formázásra így, amikor a navigációs menüt használunk, akkor mindene egyes lista elem külön CSS osztályokat kap. Erre azonban elég sokszor nincsen szükség és csak feleslegen díszeleg ott a weboldal forráskódjában. Tudom az a pár karakter nem sokat nyom a latba a betöltődés szempontjából, de legyünk maximalisták én azt mondom.
Az alábbi kód segítségével, minden class el fog tűnni, kivéve a current-menu-item, amely azt jelöli, hogy éppen hol járunk az oldalon. Ez a kis osztály, ha felhasználóbarátságot nézzük, nagyon fontos!

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1);
add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1);
add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);
function my_css_attributes_filter($var) {
  return is_array($var) ? array_intersect($var, array('current-menu-item')) : '';
}

Gravatar kép faviconnak

Fridrik Béla — Fri, 23 Dec 2011 04:40:25 +0000

Egy személyes blognál egy remek ötletnek tartom, hogy saját gravatar ikonunk legyen a faviconunk. Favicon a böngésző címsorában az URL mellett megjelenő kis ikon. Aki regisztrálva van a gravatar.com szolgáltatásában, minden bizonnyal azt az email címét adja meg az általános beállításokban is. Ezek alapján már könnyű meghatározni a favicont. Ha azt az email címet használjuk, akkor fogjuk és a theme functions.php fájljába másoljuk a kódot:

function gravatar_favicon() {
	$GetTheHash = md5(strtolower(trim(get_bloginfo('admin_email'))));
	return 'http://www.gravatar.com/avatar/' . $GetTheHash . '?s=16';
}
function favicon() {
	echo '';
}
add_action('wp_head', 'favicon');

A kód az admin email-t behelyettesíti és favikonként használja fel a wp_head-be a gravatar képünket.

Összes img tag span-ok közé

Fridrik Béla — Wed, 21 Dec 2011 21:12:34 +0000

Tudom, nem egy érdekfeszítő a cím, de szerintem rendkívül hasznos lehet sokak számára. Nos sitebuild közben, gyakran kalandozom el és van amikor saját magammal teszek rosszat például, amikor úgy formázok egy képet, hogy span-ok közé teszem. Legutóbb egy speciális képkeret miatt kellett ilyet tennem. Ez az eredményt kellett kihoznom, minden bejegyzésbe tett img tagból:

Ez így teljesen rendben is van. Megoldhatnám mondjuk egy rövid kóddal. Nem lenne rossz megoldás, de az ügyfél nem biztos, hogy örülne neki, hiszen csak plusz munkát csinálnék neki. Éppen ezért a jó öreg preg_replace-t hívtam segítségül.

function filter_images($content){
    return preg_replace('/\s*/iU', '', $content);
}
add_filter('the_content', 'filter_images');

A kódot a sablon functions.php fájlba kell illeszteni. Működése egyszerű. A content-ben megkeresem az img tageket és preg_replace segítségével elé és mögé teszem a span-t amire szükségem van. Aki még csak most ismerkedik a preg_replace-el, itt hasznos infókat tudhat meg róla.

Bejegyzés tartozó kiemelt kép

Fridrik Béla — Tue, 20 Dec 2011 21:05:34 +0000

Az előző bejegyzésemben arról írtam, hogy hogyan tudunk plusz oszlopot adni az adminban a bejegyzések menüpontnál úgy, hogy feltüntetjük az adott bejegyzéshez feltöltött fájlok számát. Ezen felbuzdulva, ma egy hasonló kóddal ajándékozom meg olvasóim. Ezen kóddal ugyanilyen oszlopot hozhatunk létre a WordPress adminban a bejegyzések menüpont alatt, csak most a bejegyzéshez tartozó kiemelt kép fog ott díszelegni.

if (function_exists( 'add_theme_support' )){
    add_filter('manage_posts_columns', 'posts_columns', 5);
    add_action('manage_posts_custom_column', 'posts_custom_columns', 5, 2);
    add_filter('manage_pages_columns', 'posts_columns', 5);
    add_action('manage_pages_custom_column', 'posts_custom_columns', 5, 2);
}
function posts_columns($defaults){
    $defaults['wps_post_thumbs'] = __('Thumbs');
    return $defaults;
}
function posts_custom_columns($column_name, $id){
	if($column_name === 'wps_post_thumbs'){
        echo the_post_thumbnail( array(125,80) );
    }
}

A kódot szintén a sablon functions.php fájljába kell beilleszteni.