Problem

I’ve just wanted to change several things on my WordPress site:

1. URL location
   from iknowsomething.com/blog
   to simple iknowsomething.com
2. WordPress folder location
   from main-server-folder (=domain folder)/blog
   to main-server-folder/iknowsomething (=domain folder)
3. Permalinks
   from iknowsomething.com/index.php/year/monthnum/day/post-title
   to simple iknowsomething.com/post-title

By this operation following problems come across:

• How to change WordPress folder and/or URL to preserve old links working from the Internet?
• How to change all WordPress media links at once to avoid changing hundreds of them manually?

Solution

I don’t want here to write about how to move WordPress site, because this can be done going through the codex.wordpress.org Moving WordPress manual. But all problems described above you cannot find in this manual except one, that you have to change all media links manually or semimanual like this, loosing old links validity. I didn’t want that nor mundane work, so all I had to do was to change original WordPress .htaccess mod_rewrite procedure (see Using Permalinks) with two new regular expressions (coloured orange) as follows :

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# Added: Rewrite old post links to be reached from the Internet
RewriteRule ^blog/index\.php/[0-9]{4}/[0-9]{1,2}/(.*) index.\php/$1 [R=301,L]
# Input example:
# http://iknowsomething.com/blog/index.php/2011/04/how-to-fix-bricked-wd-my-book-world-edition-or-install-brand-new-disk/
# Result:
# http://iknowsomething.com/how-to-fix-bricked-wd-my-book-world-edition-or-install-brand-new-disk/

# Added: Rewrite old links including internal media links
RewriteRule ^blog/(.*) $1 [R=301,L]
# Input example:
# http://iknowsomething.com/blog/wp-content/uploads/2011/06/fittext.png
# Result:
# http://iknowsomething.com/wp-content/uploads/2011/06/fittext.png

RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Save this code (properly modified to your needs) as .htaccess to WordPress folder with index.php. Now all old Internet links is working and you have to change no single one media link

That’s all

If you want to play with mod_rewrite and pretty permalinks on your own, refer to this:

• More on mod_rewrite in URL Rewriting for Beginners and simple mod_rewrite Cheet Sheet on addedbytes.com.
• To test your regular expressions for mod_rewrite just use online RegExp Tool for PHP or rexv.org.

O mod_rewrite po polsku na home.pl (podręcznik), webhost.pl, php.rk.edu.pl lub seoparty.net.

Helpful links in one place to learn, design, develop and test the web (many are web online tools).

Narzędzia webowe do nauki, projektowania, programowania i testowania weba.

HTML & CSS Tools

Color Scheme Designer

Tiny Fluid Grid: The happy & awesome way to build fluid grid based websites.

A Fluid Grid Calculator

The Typetester: is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

WebPutty: is a simple CSS editing and hosting service. WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control. Get started with just a pair of tags in your website's template and WebPutty will host and serve your published CSS minified and gzipped for super speed.

More on HTML & CSS Tools

• HTML & CSS Frameworks/Development Kits: 960.gs (tutorial on net.tutsplus.com), notjustagrid.com, blueprintcss.org, html5boilerplate.com, fluidbaselinegrid.com.
• Optimize CSS: Compressor, Decompressor, codebeautifier.com, WordPress CSS Parser.
• YUI Compressor: Yahoo JavaScript i CSS compressor.
• cssdrive.com: Image to color palette tool (css & swatches generator).
• teehanlax.com: Designing Faster with a Baseline Grid.
• Web Fonts

JavaScript Tools

JsFiddle: is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets build from HTML, CSS and JavaScript. The code can then be shared with others, embedded on a blog, etc. Using this approach, JavaScript developers can very easily isolate bugs. We aim to support all actively developed frameworks - it helps with testing compatibility.

Tinkerbin: lets you play around with HTML, JavaScript and CSS without creating files or uploading to servers. It also supports CoffeeScript, Sass (with Compass), Less, HAML, and more.

More on JavaScript Tools

• jsbin.com: Another JavaScript online Code Playground.
• JavaScript Frameworks: jquery.com, mootools.net, neonjs.com.
• jQuery-inlog: Debug your jQuery code. See exactly what you pass to functions, what they return and in which context.
• code.google.com: Google Libraries API – Developer’s Guide & Code Playground.
• cdnjs.com: More not popular js libraries CDN.

Other Web Tools

Solmetra RegEx: Test your PERL or POSIX compatible regular expressions online.

Papparazzi!: A small utility for Mac OS X that makes screenshots of an entire webpages.

UnderTheSite: We detect and catalog the technologies used by your favorite websites. Use UnderTheSite to learn more about how the web works, to see which technologies are popular, or to spread word about tools that you care about.

More on Other Web Tools

• RegExp Tools: RexV, Rework.
• dynamicdrive.com: .htaccess password generator.
• markup.io: Drawing on the web literally.
• HTTP Client: Graphically view HTTP requests
• Editors for Mac: Coda, Espresso.
• Editors for Windows: PhpED.

Docs & Manuals

W3Schools: All in one web basics.

PHP Documentation

HTML5Rocks: All about HTML 5 you need to know.

Learn jQuery & JavaScript for free

jQuery Fundamentals: An overview of the jQuery JavaScript library; when you're done with the book, you should be able to complete basic tasks using jQuery, and have a solid basis from which to continue your learning.

More on Docs & Manuals

• developer.mozilla.org: Learn JavaScript.
• wikipedia.org: Naming convention programming, Design pattern computer science.
• sourcemaking.com: Design Patterns.
• smashingmagazine.com: Guidelines For Working With External Code Libraries.
• smashingmagazine.com: Ten Oddities And Secrets About JavaScript.
• css-tricks.com: This website may or may not contain any CSS Tricks
• css-101.org: The Box Model explanatory.
• net.tutsplus.com: The 30 CSS Selectors you Must Memorize.
• designshack.co.uk: CSS Attribute Selectors: How and Why You Should Be Using Them.
• csswizardry.com: Writing efficient CSS selectors.
• net.tutsplus.com: Web Development from a Scratch.
• 24ways.org: Optimize your web design workflow.
• reinegger.net: 50 reasons not to use Photoshop for webdesign.
• addedbytes.com: Pretty permalinks and more with .htaccess mod_rewrite in URL Rewriting for Beginners and simple mod_rewrite Cheet Sheet.
• noupe.com: 10+ Mod_Rewrite Rules You Should Know.

Similar pages

• coding.smashingmagazine.com: Useful HTML-, CSS- and JavaScript Tools and Libraries

Pomocnik i przykłady zastosowań wyrażeń regularnych.

Narzędzia

• Testowanie RegEx online na spaweditor.com lub gskinner.com.
• Manual PHP Regular Expressions na php.net.
• Regex Tutorial na regular-expressions.info lub net.tutsplus.com (screencast).
• Więcej przykładów na roscripts.com, komunitasweb.com, snipplr.com, catswhocode.com.

Przykłady

RegEx img tag find/extract src img URL

Znajduje cały tag z obrazkiem w tekście oraz jego adres.

# Pattern: /<img .*?src=["'](.+?)["'].*?>/i
# Example PHP:
if (preg_match('/<img .*?src=["'](.+?)["'].*?>/i', $textHTML, $images)) {
$textHTML1 = $images[0].$textHTML1; // Wstawia cały tag img
$textHTML2 = "<img src="$images[1]" />$textHTML2"; //Wstawia tylko adres src
}

Jeśli chcemy znaleźć tylko obrazki o danym rozszerzeniu (np. tylko jpg lub png) i/lub odsiać gify (zazwyczaj gif to przycisk typu email this lub reklama), należy użyć:

# Pattern: /<img [^>]*?src="([^"']*.(jpe?g|png))".*?>/Ui
# Example PHP:
if (preg_match('/<img [^>]*?src=["']([^"']*.(jpe?g|png))["']/Ui', $textHTML, $images)) {
$textHTML1 = $images[0].$textHTML1; // Wstawia cały tag img
$textHTML2 = "<img src="$images[1]" />$textHTML2"; //Wstawia tylko adres src
}

RegEx img tag insert http domain URL

Uzupełnia adres domeny w tagach <img />, jeśli go brakuje (podpowiedź na temat negacji na regular-expressions.info).

# Pattern: /src=["']((?!http)[^"']*)["']/i
# Example PHP:
$textHTML = preg_replace('/src=["']((?!http)[^"']*)["']/i', 'src="'.$URL.'$1"', $textHTML);

RegEx extract domain URL without www, rss

Wyciąga z adresu URL samą domenę bez http(s) i prefiksów www lub rss (np. http://www.engadget.com/2011/05/ zamienia na engadget.com).

# Pattern: 'https?://|www.|rss.|/.*'i
# Example PHP:
$domainName = preg_replace("'https?://|www.|rss.|/.*'i", "", $textWithURL);

RegEx replace plain URL with link and domain name

Zamienia w tekście znalezione samotne łańcuchy URL i robi z nich linki (np. http://www.engadget.com/2011/05/ zamienia na <a href=”http://www.engadget.com/2011/05/”>engadget.com</a>).

# Pattern: 'b(https?|ftp|file)://(.*?[^/]+)([-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])'i
# Example PHP:
$textPlain = preg_replace("'b(https?|ftp|file)://(.*?[^/]+)([-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])'i", '<a href="" target="_blank">2</a>', $textPlain);

RegEx clean/strip HTML tags except one or tags group

Usuwa z HTML wszystkie tagi za wyjątkiem wybranych.

# Pattern for anchor only: <(?!/?a(?=>|s.*>))/?.*?>
# Example PHP for tags a, i, b, strong, em etc.:
$strippedHTML = preg_replace('/<(?!/?(a|i|em|b|strong)(?=>|s.*>))/?.*?>/i', '', $stringHTML);

Jak wprowadzić na stronie www znaki specjalne HTML (HTML special chars & symbols) typu: © ® ™ † ♥ → Φ ‰ itd.

Symbole matematyczne

Technologie

1. sIFR (Scalable Inman Flash Replacement) - podmienia texty HTML zamiennikiami w formacie Flash za pomocą JavaScript. Pierwotnie zaprojektowana przez Shaun’a Inmana jako IFR, oprogramowana przez Mike’a Davidsona i obecnie rozwijana przez Marka Wubbena.
   Linki: Jak zastosować? (również na tutsplus.com)
2. Cufón - zamienia czcionki na wektory VML (Vector Markup Language) przechowywane w formacie JSON (JavaScript Object Notation) i renderowane za pomocą silnika, napisanego w JavaScript.
   Linki: Generator czcionki / Plugin WP-Cufon do WordPress / więcej po polsku na www.bcymer.com.
3. FLIR (Facelift Image Replacement) - podmienia dynamicznie tekst HTML na płaskie obrazy przy użyciu PHP i JavaScript.
   Linki: Jak zastosować? (również na tutsplus.com) / WordPress FLIR Plugin
4. Typekit – komercyjna usługa wykorzystania czcionek na stronach WWW, omijająca problemy licencjonowania. Typkit hostuje bibliotekę czcionek, które zaciągane są na stronę za pomocą JavaScript.
5. The Google Font API – umożliwia osadzanie czcionek hostowanych przez Google. Podgląd dostępnych czcionek na Google Font Directory.

Narzędzia

Periodic Table of Typefaces: najczęściej wykorzystywane kroje pisma

The Typetester: porównywarka krojów czcionek systemowych

Teksty

• zeldman.com: Web fonts now (how we’re doing with that)
• tutsplus.com: 6 Ways To Improve Your Web Typography
• tutsplus.com: 11 Classic CSS Techniques Made Simple with CSS3
• nicewebtype.com: How to use CSS @font-face
• 100besteschriften.de: The 100 Best Fonts Of All Time
• tdc.org: Paul Shaws Top 100 Types survey
• instantshift.com: 21 Most Used Fonts By Professional Designers
• justcreativedesign.com: Top 7 Fonts Used By Professionals In Graphic Design
• justcreativedesign.com: 30 Fonts That ALL Designers Must Know & Should Own
• cameronmoll.com: Typefaces no one gets fired for using

Sklepy

• Darmowe: Font Squirrel, Fonts2U
• typography.com
• My Fonts
• Ascender Fonts
• Fonts Shop
• Faces
• The Font Bureau, Inc.