Cała zabawa zaczyna się kiedy podłączyłem pod tą liste funkcję jQuery slideDown która miałaby pokazywać reszte tekstu w odzielnym DIVie na tej samej stronie – bez przeładowania. I tu pojawia się problem ponieważ funkcja Wordpress the_content() owszem pokazuje tekst ale w całości i efektem byłby powtórzony nagłówek z dwóch funkcji the_excerpt() oraz z the_content().

Pewnie istnieje na to wiele innych rozwiązań ale to jest jedyne na które wpadłem ponieważ dopiero zaczynam zabawe z PHP to nie miałem za dużo podobnych pomysłów.

Rozwiązanie jest takie żeby napisać odzielnie funkcje które zastąpią te z WordPress.

Oto kod:

<?php 
function my_excerpt() {
$zawartosc = get_the_content();
$wyciag = explode('<*>', $zawartosc);
$work_excerpt=$wyciag[0];
$work_excerpt=apply_filters('the_content', $work_excerpt);
echo $work_excerpt;
}
 
function my_content() {
$zawartosc = get_the_content();
$wyciag = explode('<*>', $zawartosc);
$work_content=$wyciag[1];
$work_content=apply_filters('the_content', $work_content);
echo $work_content;
}
?>

A oto małe wyjaśnienie dla funkcji my_excerpt:

//tworze funkcje my_excerpt
function my_excerpt() {
 
//pobieram zawartość postu z funkcji get_the_content
//do ciągu $zawartość
$zawartosc = get_the_content();
 
//za pomoca explode podzielilem $zawartosc 
//na dwie części i zapisałem w tablicy $wyciag
$wyciag = explode('<*>', $zawartosc);
 
//pobieram pierwszą część tablicy
$work_excerpt=$wyciag[0];
 
//nadaje jej formatowanie znaczników HTML przez WP
$work_excerpt=apply_filters('the_content', $work_excerpt);
 
//pokazuje pierwszy fragment postu
echo $work_excerpt;

I dokładnie tak samo utworzyłem funkcje my_content tylko zmieniłem fragment tablicy na ‘[1]‘ w której znajduje się reszta postu:

$work_content=$wyciag[1];

Aby skrypt zaczął działać należy podczas pisania postu wstawić ten znaczek ‘<*>‘. Pokazuje on funkcji w którym miejscu ma odzielić od siebie fragmenty tekstu. Można go zastąpić czymś innym ale ponieważ nie wyobrażam sobie żebym miał kiedyś napisać jakiś post używając takiej ‘świeczki’ postanowiłem że z tego właśnie skorzystam.

Jeśli chcesz użyć moich funkcji wystarczy że skopiujesz powyższy kod (ten bez opisów) do pliku function.php (znajduje się w katalogu ../THEMES/TWOJA SKÓRKA/) i zamiast the_excerpt i the_content użyjesz my_excerpt i my_content.

DEMO

To w końcu o co chodzi z tymi Spritami?

Dzieki stosowaniu spritów można zredukować ilość żądań HTTP dla grafiki i zwiększyć szybkość ładowania się innych elementów strony.

Omówie to na prostym przykładzie z mojej strony. Kiedy projektowałem formularz do dodawania komentrzy pomyślalem sobie że fajnie by było jakby przycisk SUBMIT / WYŚLIJ był w kształcie chmurki z niebieskim napisem do której podłącze pseudoklase :hover która będzie podmieniać mi na chmurke z pomarańczowym napisem. Bardzo małe plik – zaledewie kilka kilobajtów ale to juz wystarczy żeby po najechaniu kursorem na przycisk chmurka znikała na 2/3 sekundy poczym pojawiała się jej wersja hover.
Moim zdaniem takie chwilowe zniknięcie chmurki wygląda bardzo nieprofesjonalnie i oto przychodzą nam z pomocą sprity.

Jak z nich korzystać?

Po pierwsze trzeba przygotować odpowiedni plik graficzny który łączy w sobie różne grafiki. W moim przypadku będzie to zwykły button ale żeby wykorzystać w pełni Sprity można zapisać wszystkie fragmenty strony w jednym pliku PNG i odwoływać się w css do zdefiniowanych współrzędnych X i Y tego pliku. Prawda że Spritne? ;)

Tak wygląda mój button:

A tak wygląda kod CSS:

#submit{
	background: url('images/form_submit_sprite.png');
	background-position: 0px 0px;
	height: 48px;
	width: 78px;
	cursor:  pointer;
}
#submit:hover{
	background: url('images/form_submit_sprite.png');
	background-position: 0px -50px;	
}

Jak widać powyżej to jest dokłądnie ten sam plik ale pokazawany na przemian jego inny fragment. Dzięki temu że umieściłem werjse hover -50px niżej mogłem ten fragment przywołać przez background-position: 0px -50px;

Kilka przykładów:

Przykład:

Po lewej standardowe ustawienie CSS float
Po prawej działanie Masonry .

Prawda że fajnie to wygląda? Na stronie autora plugina można zobaczyć pare niezłych przykładów wykorzystania Masonry.

Zapraszam do odwiedzenia:
• Fruits
• Strona Masonry

Oto fragment kodu którego używam na tej stronie:

//tytuł na wszystkich podstronach będzie
//zaczynał się od nazwy bloga
<title><?php bloginfo('name');?>
 
//jeśli pojedyńczy post
<?php if (is_single()) { ?>
 
//wyświetl tytuł postu
//wp_title() domyślnie dodaje strzałki - &raquo;
<?php wp_title();?>
 
//jeśli wejdziemy w kategorie
<?php } elseif (is_category()) { ?> 
 
//dopisuje nazwe kategorii
&raquo; <?php single_cat_title();?>
 
//jeśli jesteś w tagach 
<?php } elseif (is_tag()) { ?> 
 
//to dopisuje nazwe kategorii/tagów
&raquo; <?php single_cat_title();?>
 
//jeśli wejdziesz w archiwum
<?php } elseif (is_archive()) { ?> 
 
//to w tytule wyświetli nazwe mięsiąca
&raquo; <?php single_month_title(' ') ?>
 
//jeśli nic z powyższych nie jest spełnione to
<?php } else { ?>
 
//to dopisuje poniższy tekst 
 &raquo; Graphic Design &raquo; Tutorials &raquo; Inspirations
<?php } ?>
//zamkniecie ttitle
</title>

I w ten prosty sposób nasza strona być może będzie lepiej indexowana przez wyszukiwarki. Można oczywiscie zmodyfikować ten kod do własnych potrzeb i na rózne sposoby.

Wordpress oferuje cały zestaw funkcji warunkowych:

• is_home
• is_single
• is_page
• is_category
• is_tag
• is_tax
• is_author
• is_date
• is_search
• is_404
• i wiele innych…

Mam nadzieje że ten prosty trik okaże się dla kogoś pomocny. Więcej informacji można znaleźć w Wordpress Codex ]]> http://www.spot.owlgraphic.com/2010/seo-dynamiczny-tytul-strony/feed/ 0 http://www.spot.owlgraphic.com/2010/seo-dynamiczny-tytul-strony/ http://feedproxy.google.com/~r/OwlSpot/~3/mP-SbYoClm8/ http://www.spot.owlgraphic.com/2010/owl-spot-theme/#comments Fri, 12 Feb 2010 01:30:26 +0000 Owl http://www.spot.owlgraphic.com/?p=10 Lorem ipsum dolor sit amet. Hoefler text, Times New Roman, Georgia, and Times – for headers nad main text.
Lucida Grande, Lucida Sans and… Read more

Lorem ipsum dolor sit amet. Hoefler text, Times New Roman, Georgia, and Times – for headers nad main text.
Lucida Grande, Lucida Sans and Verdana for other sidebar and navigation.
Consectetur adipiscing elit. Aliquam at lacus vitae sem condimentum volutpat. Cras vitae risus ac nulla fermentum pulvinar eu quis eros. Donec eu arcu ultrices nisl luctus consequat non quis mi. Curabitur luctus nisl vitae dolor egestas posuere. Vestibulum ut nibh eu mauris pellentesque molestie. In hac habitasse platea dictumst. Nulla nibh nulla, dapibus vitae adipiscing id, scelerisque sed nulla. – mistrz łaciny powraca

Header H2 – 1.5em - 24px. Cras orci neque, aliquam sed commodo in, hendrerit fermentum odio. Nulla facilisi.

Normalny Paragraf – vamus posuere euismod lectus et tristique. Nullam convallis accumsan turpis porttitor laoreet. Pellentesque vestibulum justo in velit faucibus in rutrum libero pulvinar. Nulla facilisi. Aliquam erat volutpat. Cras odio ligula, facilisis a sollicitudin vitae.

Header h3 – 1.25em – 20px

Vivamus posuere euismod lectus et tristique. Nullam convallis accumsan turpis porttitor laoreet. Pellentesque vestibulum justo in velit faucibus in rutrum libero pulvinar. Nulla facilisi. Aliquam erat volutpat. Cras odio ligula, facilisis a sollicitudin vitae, porttitor eget dui.

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” — Steve Jobs

First letter augue eget diam tincidunt feugiat. Nulla tortor enim, consequat molestie tincidunt eget, cursus condimentum risus. Sed ante ante, posuere vitae laoreet dignissim, feugiat id lacus. Nunc lectus arcu, gravida eu aliquam vitae, egestas in velit. Nulla et est ligula. Vestibulum viverra convallis accumsan. Duis euismod quam at sem gravida eget egestas sapien pellentesque. Nulla facilisi. Aliquam sit amet sem at tellus consectetur euismod sit amet non lacus. Nunc vel urna nunc. Pellentesque ac arcu urna, in auctor enim. Nullam facilisis blandit diam ut convallis.

Code Snippet:

#nic {
width:100px
}

]]>