ΠΠ°ΡΠΈΠ½Π°Ρ Ρ Π²Π΅ΡΡΠΈΠΈ WordPress 3.5, Π² ΡΠΎΡΡΠ°Π² ΠΎΡΠ½ΠΎΠ²Π½ΡΡ
Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ Π±ΡΠ» Π²ΠΊΠ»ΡΡΠ΅Π½ ΡΠΊΡΠΈΠΏΡ jQueri Masonry, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Ρ Π»Π΅Π³ΠΊΠΎΡΡΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ Π²ΡΠ²ΠΎΠ΄ ΠΏΠΎΡΡΠΎΠ² Π½Π° Π³Π»Π°Π²Π½ΡΠΉ ΡΠΊΡΠ°Π½. Π Π΄Π°Π½Π½ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ ΡΠ΅ΡΡ ΠΈΠ΄Π΅Ρ ΠΎ ΠΊΠ°ΡΡΠΈΠ½ΠΊΠ΅ Π² Π²ΠΈΠ΄Π΅ Β«ΡΡΠ΅Π½Ρ ΠΈΠ· ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠΎΠ²Β», ΠΏΡΠΈΡΠ΅ΠΌ Π΄Π»ΠΈΠ½Π° ΠΏΠΎΡΡΠΎΠ² ΠΈ ΡΠ°Π·ΠΌΠ΅Ρ ΠΈΡ
ΠΊΠ°ΡΡΠΈΠ½ΠΎΠΊ Π·Π½Π°ΡΠ΅Π½ΠΈΡ Π½Π΅ ΠΈΠ³ΡΠ°ΡΡ: Π²ΡΠ΅ ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠΈ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½Ρ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ, Π·Π°ΠΏΠΎΠ»Π½ΡΡ Π²ΡΠ΅ ΠΎΡΠ²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ, ΠΈ ΡΠΎΠ·Π΄Π°ΡΡ Π²ΠΈΠ·ΡΠ°Π»ΡΠ½ΠΎ-ΠΏΡΠΈΡΡΠ³Π°ΡΠ΅Π»ΡΠ½ΡΡ ΠΊΠ°ΡΡΠΈΠ½ΠΊΡ. Π§ΡΠΎΠ±Ρ ΠΏΠΎΠ½ΡΡΡ, ΠΎ ΡΠ΅ΠΌ ΡΠ΅ΡΡ, ΡΡΠΎΠΈΡ ΠΎΠ±ΡΠ°ΡΠΈΡΡΡΡ ΠΊ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΠΎΠΌΡ ΡΠ΅ΡΠ²ΠΈΡΡ Pinterest.
ΠΡΠ΅ΠΈΠΌΡΡΠ΅ΡΡΠ²Π° jQueri Masonry
Β«ΠΠΈΡΠΏΠΈΡΠ½ΡΠΉ ΡΠΎΡΠΌΠ°ΡΒ» ΠΏΡΠ΅Π΄ΡΡΠΌΠ°ΡΡΠΈΠ²Π°Π΅Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΡΡΠ΄ΠΎΠ² ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ. ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΡΠΎΠ±Π°Ρ ΡΠΎΠ»Ρ ΡΠ΄Π΅Π»ΡΠ΅ΡΡΡ Π½Π΅ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΡΠ½ΠΎΠΌΡ, Π° Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΠΎΠΌΡ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°Π½ΠΈΡ. ΠΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄Π»ΠΈΠ½Π° ΠΏΠΎΡΡΠΎΠ² ΠΌΠΎΠ³ΡΡ ΠΎΡΠ»ΠΈΡΠ°ΡΡΡΡ, ΡΠ°ΠΊΠΈΠΌ ΠΎΠ±ΡΠ°Π·ΠΎΠΌ, Π² Π²Π΅ΡΡΠΈΠΊΠ°Π»ΡΠ½ΡΡ ΡΡΠ΄Π°Ρ ΠΌΠΎΠ³ΡΡ ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°ΡΡΡΡ ΠΏΡΠΎΠ±Π΅Π»Ρ, ΠΊΠΎΡΠΎΡΡΠ΅ Π²ΡΠ³Π»ΡΠ΄ΡΡ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ ΠΊΠ°ΠΊ Π±Π΅Π»ΡΠ΅ ΠΏΡΡΠ½Π°. Π’Π°ΠΊΠΎΠΉ Π²Π°ΡΠΈΠ°Π½Ρ ΠΈΠ·Π²Π΅ΡΡΠ΅Π½, ΠΊΠ°ΠΊ ΠΏΠ»Π°Π²Π°ΡΡΠΈΠΉ CSS, Π½ΠΎ ΠΊΠ°ΠΊ ΡΠΆΠ΅ ΠΎΡΠΌΠ΅ΡΠ°Π»ΠΎΡΡ Π²ΡΡΠ΅, ΠΏΡΠΎΠ±Π΅Π»Ρ ΠΌΠΎΠ³ΡΡ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡΡΡΡ ΠΈ Π²ΡΠ΅ Β«ΠΊΠΈΡΠΏΠΈΡΠΈΠΊΠΈΒ» Π±ΡΠ΄ΡΡ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½Ρ Π΄ΡΡΠ³ ΠΊ Π΄ΡΡΠ³Ρ. Π ΡΡΠΎ ΠΌΠΎΠΆΠ΅Ρ ΡΠ΄Π΅Π»Π°ΡΡ jQueri Masonry.
ΠΡΠ²ΠΎΠ΄ Π² ΠΊΠΈΡΠΏΠΈΡΠ½ΠΎΠΌ ΡΠΎΡΠΌΠ°ΡΠ΅
Π§ΡΠΎΠ±Ρ Π·Π°Π³ΡΡΠ·ΠΈΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ, Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ wp_enqueu_script, Π΄Π»Ρ ΡΡΠΎΠ³ΠΎ Π² functions.php Π½ΡΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠΊΡΠΈΠΏΡ:
function mason_script() {
wp_enqueue_script( βjquery-masonryβ );
}
add_action( βwp_enqueue_scriptsβ, βmason_scriptβ );
ΠΠ°Π»Π΅Π΅ Π½ΡΠΆΠ½ΠΎ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ΅ΡΠΊΡ. ΠΠ»Ρ ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΉ Π²Π΅ΡΡΡΠΊΠΈ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ ΡΠ»Π΅Π΄ΡΡΡΠΈΠΉ ΠΊΠΎΠ΄ HTML Π² ΡΠΈΠΊΠ» ΠΈΠ»ΠΈ ΡΠ°ΡΡΡ ΡΠ°Π±Π»ΠΎΠ½Π°, Π³Π΄Π΅ ΠΏΠ»Π°Π½ΠΈΡΡΠ΅ΡΡΡ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠΈΡΠΏΠΈΡΠ½ΠΎΠΉ ΡΡΠ΅Π½Ρ. Π‘Π½Π°ΡΠ°Π»Π° Π½Π°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ ΠΎΠ±ΡΠΈΠΉ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ Π΄Π»Ρ Π²ΡΠ΅Ρ ΠΏΠΎΡΡΠΎΠ², Π·Π°ΡΠ΅ΠΌ Π²ΠΊΠ»ΡΡΠ°Π΅ΠΌ Π΄Π°Π½Π½ΡΠΉ ΡΠΈΠΏ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ°:
Β
ΠΠ°ΡΡΡΠ°ΠΈΠ²Π°Π΅ΠΌ CSS: ΡΠΊΠ°Π·ΡΠ²Π°Π΅ΠΌ ΡΠΈΡΠΈΠ½Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅Ρ-Π±Π»ΠΎΠΊΠ°, Π° ΡΠ°ΠΊΠΆΠ΅ ΡΠΈΡΠΈΠ½Ρ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎΠ³ΠΎ ΠΏΠΎΡΡΠ°, ΡΡΠΎΠ±Ρ ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ Π½ΡΠΆΠ½ΡΠΉ ΠΊΠ°ΠΊ Π² Pinterest Π²ΠΈΠ΄. Π ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΏΠΎΠ»ΠΎΡΡ 960 px ΠΈ ΠΏΠΎΠ»ΡΡΠΈΡΡ 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ Ρ ΡΠΈΡΠΈΠ½ΠΎΠΉ 240 px Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΏΠΎΡΡΠ΅. ΠΠ°ΠΏΠΎΠΌΠ½ΠΈΠΌ ΠΏΠ°ΡΠ°ΠΌΠ΅ΡΡΡ ΠΈ Π½Π°ΡΡΡΠΎΠΈΠΌ Π²ΡΠ²ΠΎΠ΄ ΡΠ°Π±Π»ΠΈΡΡ ΡΡΠΈΠ»Π΅ΠΉ:
#container {
width:Β Β Β Β Β 960px; // width of the entire container for the wall
}
.brick {
width:Β Β Β Β Β 220px; // width of each brick less the padding inbetween
padding:Β Β Β 0px 10px 15px 10px;
}
Π’Π΅ΠΏΠ΅ΡΡ Π½Π°ΡΡΡΠΎΠΈΠΌ ΡΡΠ½ΠΊΡΠΈΡ, ΠΊΠΎΡΠΎΡΠ°Ρ Π±ΡΠ΄Π΅Ρ ΡΠ²ΠΎΠ΄ΠΈΡΡ Π²ΠΌΠ΅ΡΡΠ΅ Π²ΡΠ΅ div-ΠΊΠΎΡΠ΅ΠΉΠ½Π΅ΡΡ:
jQuery( document ).ready( function( $ ) {
$( β#containerβ ).masonry( { columnWidth: 220 } );
} );
ΠΠΎΠΎΠ±ΡΠ΅ ΡΡΠΎΠΈΡ ΠΎΡΠΌΠ΅ΡΠΈΡΡ, ΡΡΠΎ Masonry ΠΏΠΎΡΡΠ°Π²Π»ΡΠ΅ΡΡΡ Ρ Π±ΠΎΠ»ΡΡΠΈΠΌ ΠΊΠΎΠ»ΠΈΡΠ΅ΡΡΠ²ΠΎΠΌ Π²ΡΡΡΠΎΠ΅Π½Π½ΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΠ΅ΠΉ. ΠΠ»Ρ ΠΎΠΆΠΈΠ²Π»Π΅Π½ΠΈΡ ΠΏΠΎΡΡΠΎΠ², ΠΊ ΠΏΡΠΈΠΌΠ΅ΡΡ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡΠΈΠΌΠ΅Π½ΡΡΡ ΡΡΡΠ΅ΠΊΡΡ Π°Π½ΠΈΠΌΠ°ΡΠΈΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΠ΅ Π½Π°ΡΡΡΠΎΠΉΠΊΠΈ Π½Π° ΡΡΠ΅Π½Ρ ΠΈΠ»ΠΈ ΡΠΏΠΎΡΡΠ΄ΠΎΡΠΈΠ²Π°ΡΡ Π²ΡΠ²ΠΎΠ΄ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ° Π² ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ ΠΏΠΎΡΡΠ΄ΠΊΠ΅. ΠΡ, Π° Π΅ΡΠ»ΠΈ Π²Ρ Ρ ΠΎΡΠΈΡΠ΅ ΡΠ°ΠΉΡ Ρ ΠΏΠΎΠ΄ΠΎΠ±Π½ΡΠΌ ΡΡΠ½ΠΊΡΠΈΠΎΠ½Π°Π»ΠΎΠΌ, Π½ΠΎ Π½Π΅ Π³ΠΎΡΠΎΠ²Ρ Π²Π½ΠΎΡΠΈΡΡ ΠΏΡΠ°Π²ΠΊΠΈ ΠΊΠΎΠ΄Π°, Π²Ρ Π²ΡΠ΅Π³Π΄Π° ΠΌΠΎΠΆΠ΅ΡΠ΅ Π·Π°ΠΊΠ°Π·Π°ΡΡ ΡΠ°ΠΉΡ Ρ Π½Π°Ρ.